匿名函数的使用

createTextnode 创建文本

createElement   创建元素

appendChild     将文本或元素追加

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>动态添加城市</title>

        <script>

            window.onload = function(){

                document.getElementById("btn").onclick = function(){

                    //1.获取ul元素节点

                    var ulEle = document.getElementById("ul1");

                    //2.创建城市文本节点

                    var textNode = document.createTextNode("深圳");//深圳

                    //3.创建li元素节点

                    var liEle = document.createElement("li");//<li></li>

                    //4.将城市文本节点添加到li元素节点中去

                    liEle.appendChild(textNode);//<li>深圳</li>

                    //5.将li添加到ul中去

                    ulEle.appendChild(liEle);

                }

            }

        </script>

    </head>

    <body>

        <input type="button" value="添加新城市" id="btn"/>

        <ul id="ul1">

            <li>北京</li>

            <li>上海</li>

            <li>广州</li>

        </ul>

    </body>

</html>

javascript 动态添加城市的更多相关文章

  1. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  3. javascript动态添加本地文件列表信息

    工作需要做了一个动态添加列表页面的小demo.用到了杂七杂八的javascript小知识. 而且并没有涉及到工作中的具体情境.有些通用,所以暂且罗列到这里.以后需要的时候可以直接拿来用. 看源码总是让 ...

  4. javascript动态添加form表单元素

    2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...

  5. javaScript动态添加样式

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload= ...

  6. JavaScript 动态添加div 绑定点击事件

    1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...

  7. 转： javascript动态添加、修改、删除对象的属性和方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  8. javascript动态添加、修改、删除对象的属性与方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  9. javascript动态添加html节点

    之前一直没怎么接触需要动态添加和删除html节点的项目,这次项目中用到了,也学习了. 在一个<table id="tab">标签中添加一个<tr id=" ...

随机推荐

  1. 初学js之qq聊天实例

    实现的功能为上图所示,但是每新发送的消息必须显示在最上面. 我实现了两版,样式有是一样的.我们直接看代码. 版本一: <!DOCTYPE html> <html lang=" ...

  2. 100个经典C语言程序（益智类）

    100个经典C语言程序(益智类) [1.绘制余弦曲线] 在屏幕上用“*”显示0~360度的余弦函数cos(x)曲线 [问题分析与算法设计] 利用cos(x)的左右对称性,将屏幕的行方向定义为x,列方向 ...

  3. astyle 使用说明 —— 集成到开发平台中

    转自:https://www.cnblogs.com/jiangxinnju/p/4908575.html 欢迎关注我的社交账号: 博客园地址: http://www.cnblogs.com/jian ...

  4. python上数据存储 .h5格式或者h5py

    最近在做城市计算的项目,数据文件是以.h5的格式存储的,总结下其用法和特点 来自百度百科的简介: HDF(Hierarchical Data Format),可以存储不同类型的图像和数码数据的文件格式 ...

  5. MSSQL将多行单列变一行一列并用指定分隔符分隔，模拟Mysql中的group_concat

    -- 将多行记录(只能一个列)用指定分隔符分隔 IF(OBJECT_ID('sp_RowsChangeClosBySplit',N'P') IS NOT NULL) DROP PROC sp_Rows ...

  6. windows服务安装卸载

    到C盘下找到对应的开发VS的installutil.exe文件,复制到程序的执行文件(*.exe)相同目录下在开始程序中找到VS命令提示工具 转到程序的执行文件(*.exe)目录下 C:\>cd ...

  7. 39、apk瘦身（转载）

    本文转自::Android开发中文站 » 关于APK瘦身值得分享的一些经验 从APK的文件结构说起 APK在安装和更新之前都需要经过网络将其下载到手机,如果APK越大消耗的流量就会越多,特别是对于使用 ...

  8. MySQL != 失效

    字段中包含 NULL 和 其他字符串值时, 字段既包含 NULL 也有字符串类型的值, 使用如下 SQL 无法获取值为 NULL 的部分 SELECT * FROM table_name WHERE ...

  9. psql 工具详细使用介绍

    psql 介绍 psql 是 PostgreSQL 中的一个命令行交互式客户端工具, 它允许你交互地键入 SQL 命令,然后把它们发送给 PostgreSQL 服务器,再显示 SQL 或命令的结果. ...

  10. hnust 土豪金的加密解密

    问题 G: 土豪金的加密与解密 时间限制: 1 Sec  内存限制: 128 MB提交: 466  解决: 263[提交][状态][讨论版] 题目描述     有一位姓金的同学因为买了一部土豪金,从此 ...