匿名函数的使用

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. Ubuntu12.04下YouCompleteMe安装教程（部分）

    1.通过源码编译安装VIM 开发中使用的是Ubuntu 12.04 LTS,通过sudo apt-get install vim安装的版本较低,不支持YCM,所以,用源码编译并安装最新的Vim. 卸载 ...

  2. 动态规划：HDU-2542-0-1背包问题：饭卡

    解题心得: 这题就是一个简单的0-1背包问题,只不过加了一系列的限制.可以想办法消去限制,直接转换成0-1背包问题的模板形式. 需要注意的几个点:首先对于剩余的5元钱的处理可以直接在总的钱数上将5减去 ...

  3. TCP/IP网络编程之I/O复用

    基于I/O复用的服务端 在前面章节的学习中,我们看到了当有新的客户端请求时,服务端进程会创建一个子进程,用于处理和客户端的连接和处理客户端的请求.这是一种并发处理客户端请求的方案,但并不是一个很好的方 ...

  4. JS 对于回调函数的理解，和常见的使用场景应用，使用注意点

      很经常我们会遇到这样一种情况: 例如,你需要和其他人合作,别人提供数据,而你不需要关注别人获取或者构建数据的方式方法. 你只要对这个拿到的数据进行操作. 这样,就相当于我们提供一个外在的函数,别人 ...

  5. IOS开发---菜鸟学习之路--（六）-UITableView几个方法的使用说明

    对于UITableView的基础使用我这边就不做重复介绍了 我重点就来介绍下如何实现大部分新闻的界面.也就是第一条记录显示大图片下面加一段文字说明 然后剩下来的内容全部显示为文字图片的格式 其实要做到 ...

  6. 报错： Could not open JDBC Connection for transaction; nested exception is java.sql.SQLException: An attempt by a client to checkout a Connection has timed out. 数据库连接超时

    解决方法一: [oracle@data ~]$ sqlplus / as sysdba——连接到数据库 SQL*Plus: Release 11.2.0.4.0 Production on Mon M ...

  7. 虚拟机安装教程（linux、centOS）

    前提: Windows7系统 64位 VMware-workstation-full-11.0.0-2305329.exe CentOS-6.6-x86_64-bin-DVD1.iso 安装步骤: 看 ...

  8. vmware克隆centos修改linux mac地址

    故障背景:  在vmware workstation中了完全克隆了一个已经存在的centos的虚拟机,启动之后发现网卡没有启动.于是重启一下network服务,发现提示错误信息“Device eth0 ...

  9. Python基础-week06 面向对象编程进阶

    一.反射 1.定义:指的是通过字符串来操作类或者对象的属性 2.为什么用反射? 减少冗余代码,提升代码质量. 3.如何用反射? class People: country='China' def __ ...

  10. 03 Java 虚拟机是如何加载 Java 类的

    Java 引用类型 Java 中的引用类型细分为四种:类,接口,数组类和泛型参数. 因为泛型参数会在编译过程中被擦除,所以 Java 虚拟机实际上只有前三种.数组类是由 Java 虚拟机直接生成的,其 ...