使用的相关知识点：对子节点的添加：document.appendClild()

文本节点的创建：document.createTextNode()

元素节点的创建：document.createElement()

<!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("ulEle");

					//2、创建文本节点

					var textNode = document.createTextNode("高松");

					//3、创建li节点<li></li>

					var liEle = document.createElement("li");

					//4、将文本节点添加到li节点中

					liEle.appendChild(textNode);

					//5、将李li节点添加至ul节点中

					ulEle.appendChild(liEle);

				}

			}

		</script>

	</head>

	<body>

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

		<ul id="ulEle">

			<li>上海</li><li>新西兰</li><li>东京</li><li>莫斯科</li>

		</ul>

	</body>

</html>

JS案例六_1:添加城市的更多相关文章

  1. JS案例六_2：省市级联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JS案例 - 城市三级联动

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

  3. Knockout.Js案例一Introduction

    </strong></p> <p>Last name: <strong data-bind="text:lastName ">tod ...

  4. JS对select动态添加option操作 （三级联动） （搜索拼接）

    以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...

  5. 原生Js汉语拼音首字母匹配城市名/自动提示列表

    根据城市的汉语名称首字母把城市排序,基本思路: 1.处理数据,按照需要的格式分别添加{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQR ...

  6. js案例之使用正则表达式进行验证数据正确性

    #js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...

  7. KingbaseES V8R3集群维护案例之---在线添加备库管理节点

    案例说明: 在KingbaseES V8R3主备流复制的集群中 ,一般有两个节点是集群的管理节点,分为master和standby:如对于一主二备的架构,其中有两个节点是管理节点,三个数据节点:管理节 ...

  8. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  9. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

随机推荐

  1. wordpress安装教程

    最近安装了wordpress来搭建自己的网站,过程有些艰辛,以防以后转移服务器再次遇到这个难题,在此记下自己的这次安装过程以及一些问题,同时也供遇到相同问题的初次接触者做参考. 另外说明一下我用的操作 ...

  2. 软考自查：UML建模

    UML建模 内容提要 用例图 类图与对象图 顺序图 活动图 状态图 通信图 构件图 用例图 包含关系 扩展关系 泛化关系     类图与对象图 填类名,方法名,属性名 填多重度 填关系     1: ...

  3. nDPI-dev分析

    目前在 分为两个层次:其一是应用分析,学会如何使用:其二是原理分析,看懂它如何实现. 1. 打包该数据帧,搜集l3.l4层报头信息 2. 查询链接跟踪(如果已被标识,则直接获取到该数据帧所属协议类型) ...

  4. LeetCode174-Dungeon Game-数组，动态规划

    题目描述 The demons had captured the princess (P) and imprisoned her in the bottom-right corner of a dun ...

  5. JavaScript 数组去重方法总结

    1.遍历数组法: 这应该是最简单的去重方法(实现思路:新建一新数组,遍历数组,值不在新数组就加入该新数组中) // 遍历数组去重法 function unique(arr){ var _arr = [ ...

  6. CAP原则和BASE定理

    CAP原则和BASE定理 分布式系统 来自个人OneNote 以CAP理论为基础的三种解决方案 1.两阶段提交 所谓的两个阶段是指:第一阶段:准备阶段(投票阶段)和第二阶段:提交阶段(执行阶段). 准 ...

  7. IPTABLES使用总结（内网模拟银行网络）

    iptables中有以下三种类型的表: FILTER表,默认的表,包含以下三种内建链: INPUT链,发给本地sockets的包 FORWARD链,经由系统发送的包 OUTPUT链,本地生成并发出的包 ...

  8. js 整理

    类型 1.js 中的数据类型,解释清楚原始数据类型和引用数据类型 js中共有null, underfined, string, number, boolean, object 六种数据类型 原始数据类 ...

  9. ArcGIS JS API4 With VueJS集成开发

    1.USING VUEJS WITH ARCGIS API FOR JAVASCRIPT,集成VUE到ArcGIS JS开发中. 2.ARCGIS API 4 FOR JS WITH VUE-CLI ...

  10. 安装PyCharm开发工具

    1.进入PyCharm官网 http://www.jetbrains.com/pycharm/ 2.点击现在下载 3.选择windows版本 4.打开安装程序 5.下一步,选择安装路径,安装 6.安装 ...