匿名函数的使用

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. 使用shell脚本添加用户

    该文演示如何使用shell脚本完成添加用户,首先进行一个判断,如果用户存在,提示该用户已经存在,否则进行添加新的用户. 示例代码如下: #!/bin/bash grep_user() { R=`gre ...

  2. 模块之 logging模块 time 模块 random模块 sys模块 pickle模块

    1.如果执行文件不在项目根目录下,需要添加项目根目录到sys.path中2.调用业务逻辑 2.logging模块 程序日志是 什么时间发生了什么事情,以及当时的情况 不是logging的话 记录日志的 ...

  3. Android学习笔记之-----讯飞语音识别实例化RecognizerDialog参数出现错误的解决方法

    本人也是个小菜鸟,在做语音识别时也遇到了这个问题,空指针一直报错,app程序停止运行. 在网上搜了半天在这个帖子里找到了解决方法:http://bbs.xfyun.cn/forum.php?mo .. ...

  4. Git之2分钟教程

    Git之2分钟入门 普通人:“借我1000块钱”.程序猿:“借你1024吧,凑个整”. 今天是1024,是我们程序员的节日,在此,首先祝各位程序猿以及程序媛们节日快乐~然后送出一份节日礼物,没错,就是 ...

  5. 36、imageview的坑

    当频繁设置imageview的背景图片时,用: imageviewChooseStaff.setImageResource(R.drawable.default_head_pic); 而不是 imag ...

  6. 感谢beyond,感谢家驹

  7. SQL语句操作符优化

    转载地址:http://database.51cto.com/art/200903/112810.htm IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格. ...

  8. 【bzoj1803】Spoj1487 Query on a tree III DFS序+主席树

    题目描述 You are given a node-labeled rooted tree with n nodes. Define the query (x, k): Find the node w ...

  9. [HEOI2016/TJOI2016][bzoj4554] 游戏 [建图+最大流]

    题面 传送门 思路 看到棋盘摆放和棋子冲突,再加上这么小的数据范围,你能想到什么? 网络流棋盘模型啊! 就是 把源点连到每一行,每一列连到汇点,再在中间...... 等等,这道题每行不一定全部冲突?? ...

  10. [WC2013][luogu4074] 糖果公园 [树上带修改莫队]

    题面: 传送门 思路: 一道实现起来细节比较恶心的题目 但是其实就是一个裸的树上带修改莫队 好像树上莫队也出不了什么结合题目,不像序列莫队天天结合AC自动机.后缀数组...... 莫队学习请戳这里:莫 ...