使用的相关知识点：对子节点的添加：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. ace-editor线上代码编辑器

    package.json { "name": "vue-cli", "version": "1.0.0", " ...

  2. 【配置】MongoDB配置文件详细配置

    # 数据文件位置 dbpath = /opt/module/mongoData # 日志文件位置 logpath = /opt/module/mongoLog/mongodb.log # 以追加方式写 ...

  3. 比原链（Bytom）先知节点 Ubuntu接入文档

    系统要求 我们建议选择知名的VPS服务商,运行比原链节点对算力没有要求,但是请配置尽可能大的磁盘空间. 节点服务器最小配置: 操作系统: Windows/Linux/Docker CPU: 2核 内存 ...

  4. Python汉诺塔

    import turtle class Stack: def __init__(self): self.items = [] def isEmpty(self): return len(self.it ...

  5. Valse2019笔记——弱监督视觉理解

    程明明(南开大学):面向开放环境的自适应视觉感知 (图片来自valse2019程明明老师ppt) 面向识别与理解的神经网络共性技术 深度神经网络通用架构 -- VggNet(ICLR'15).ResN ...

  6. SpringIOC的概念理解、构造器注入、setter注入、p命名空间注入、IOC容器介绍与比较

    1.IOC概念理解 IOC(Inversion of Control)即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象 ...

  7. Lintcode174-Remove Nth Node From End of List-Easy

    174. Remove Nth Node From End of List Given a linked list, remove the nth node from the end of list ...

  8. Maven工程的POM继承

    父POM的作用是消除配置的重复. 父POM必须<packaging>pom</packaging>. 还有 <modules> <module>子模块1 ...

  9. MATLAB 实时脚本（live-script）使用

    在matlab2016a及以上的版本不建议安装notebook来编写实施脚本,以为之后的matlab里面会有live-script,他可以创建实施脚本,使脚本与方便操作.那么这个live script ...

  10. hive小文件合并设置参数

    Hive的后端存储是HDFS,它对大文件的处理是非常高效的,如果合理配置文件系统的块大小,NameNode可以支持很大的数据量.但是在数据仓库中,越是上层的表其汇总程度就越高,数据量也就越小.而且这些 ...