匿名函数的使用

createTextnode 创建文本

createElement   创建元素

appendChild     将文本或元素追加

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>动态添加城市</title>
  6.         <script>
  7.             window.onload = function(){
  8.                 document.getElementById("btn").onclick = function(){
  9.                     //1.获取ul元素节点
  10.                     var ulEle = document.getElementById("ul1");
  11.                     //2.创建城市文本节点
  12.                     var textNode = document.createTextNode("深圳");//深圳
  13.                     //3.创建li元素节点
  14.                     var liEle = document.createElement("li");//<li></li>
  15.                     //4.将城市文本节点添加到li元素节点中去
  16.                     liEle.appendChild(textNode);//<li>深圳</li>
  17.                     //5.将li添加到ul中去
  18.                     ulEle.appendChild(liEle);
  19.                 }
  20.             }
  21.         </script>
  22.     </head>
  23.     <body>
  24.         <input type="button" value="添加新城市" id="btn"/>
  25.         <ul id="ul1">
  26.             <li>北京</li>
  27.             <li>上海</li>
  28.             <li>广州</li>
  29.         </ul>
  30.     </body>
  31. </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. pip3 的安装 同时安装lxml和pygame

    ubuntu18.04中 首先查看自己电脑的python版本,一般都会有2, 和3 python -V python3 -V 查看pip版本 pip -V pip3 -V 现在我们就可以开始安装我们的 ...

  2. Java Web 基础（一） 基于TCP的Socket网络编程

    一.Socket简单介绍 Socket通信作为Java网络通讯的基础内容,集中了异常.I/O流模式等众多知识点.学习Socket通信,既能够了解真正的网络通讯原理,也能够增强对I/O流模式的理解. 1 ...

  3. pandas知识点（处理缺失数据）

    pandas使用浮点值NaN表示浮点和非浮点数组中的缺失数据: In [14]: string_data = Series(['aardvark','artichoke',np.nan,'avocad ...

  4. 2018 Multi-University Training Contest 1 H - RMQ Similar Sequence（HDU - 6305 笛卡尔树）

    题意: 对于一个序列a,构造一个序列b,使得两个序列,对于任意的区间 [l, r] 的区间最靠近左端点的那个最大值的位置,并且序列 b 满足 0 < bi < 1. 给定一个序列 a ,求 ...

  5. 洛谷 P3740 [HAOI2014]贴海报

    题目描述 Bytetown城市要进行市长竞选,所有的选民可以畅所欲言地对竞选市长的候选人发表言论.为了统一管理,城市委员会为选民准备了一个张贴海报的electoral墙. 张贴规则如下: electo ...

  6. Spring Boot 要点--启动类和热部署

    spring boot需要一个启动类 比如 package com.tianmaying; import org.springframework.boot.SpringApplication; imp ...

  7. c# 钩子程序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  8. Android之Bitmap 高效加载

    一张图片(BitMap)占用的内存=图片长度*图片宽度*单位像素占用的字节数 图片格式(Bitmap.Config) 一张100*100的图片占用内存的大小 ALPHA_8 图片长度*图片宽度 100 ...

  9. PHP共享内存的应用shmop系列

    简单的说明 可能很少情况会使用PHP来操控共享内存,一方面在内存的控制上,MC已经提供了一套很好的方式,另一方面,自己来操控内存的难度较大,内存的读写与转存,包括后面可能会用到的存储策略,要是没有一定 ...

  10. 用Vundle管理Vim插件

    作为程序员,一个好用的Vim,是极其重要的,而插件能够使原本功能羸弱的Vim变得像其他功能强大的IDE一样好用.然而下载.配置插件的过程比较繁琐,大家往往需要自己进行下载/配置等操作,如果还涉及到更新 ...