使用的相关知识点：对子节点的添加：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. linux基础之CentOS7新特性

    CentOS7开机启动顺序: POST --> Boot Sequence --> Bootloader --> kernel + initramfs(initrd) --> ...

  2. PageRank算法实现

    基本原理 在互联网上,如果一个网页被很多其他网页所链接,说明它受到普遍的承认和信赖,那么它的排名就高.这就是PageRank的核心思想. 引用来自<数学之美>的简单例子: 网页Y的排名应该 ...

  3. loadrunner 参数化-如何从数据库中取数据-连接数据库进行参数化

    LoadRunner提供两种参数化取值方式,一种是手动编辑,另一种就是通过连接数据库取值.一般在大型业务并发压力测试时,数据量肯定也都是非常大的,所以手动去编辑就不切实际了,这时用连接数据库的功能就方 ...

  4. oracle 存储过程循环打开游标数据处理

    2017-07-24 14:12:42 SQL内容: 1.一次性检索 100000 条数据. 2. 1000 条提交一次. 3.超过 100000 万条,重新打开游标,重新检索. pl/sql内容如下 ...

  5. time series 时间序列 | fractional factorial design 部分要因试验设计

    作业: 1) A plot of data from a time series, which shows a cyclical pattern – please show a time series ...

  6. 一个SQL语句的优化(sqlserver)

    最早的写法: WITH T AS ( end as Flag FROM YM WHERE Col_076 BETWEEN '2018-07-25' AND '2018-08-03' AND Col_4 ...

  7. mtcnn

    1.widerface样本标签处理 图片名 x1  y1  x2  y2  x11 y11  x22  y22  多人脸框 # -*- coding: utf- -*- ""&qu ...

  8. Django web框架-----视图与网址的不同请求方式

    在网页上做加减法 说明:mytestsite是django框架下的项目,quicktool是mytestsite项目中的应用 方式一:采用  /add/?a=1&b=4这种get方法进行 qu ...

  9. 安装Windows 和 Linux双系统(vmware) Centos7

    这里我安装的是Windows + Centos 7,如果是要安装Centos 6,步骤一样 一.安装Windows和Linux双系统需要先安装Windows然后安装Linux 解释:这里解释下为什么要 ...

  10. Altium Designer添加元件库文件

    1 默认元件库路径 C:\Users\Public\Documents\Altium\AD 10.0.0.20340\Library 2 创建元件原理图库 图2.1 新建schlib 图2.2 绘制元 ...