使用的相关知识点：对子节点的添加：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. 2019年3月10日 装饰器进阶-模拟session

    ser_dic={'username':None,'login':False}#用户字典,反应登入状态,用字典做全局变量 def idf(func):#验证登入信息是否正确 def wrapper(* ...

  2. mybatis原理分析学习记录，mybatis动态sql学习记录

    以下个人学习笔记,仅供参考,欢迎指正. MyBatis 是支持定制化 SQL.存储过程以及高级映射的持久层框架,其主要就完成2件事情: 封装JDBC操作 利用反射打通Java类与SQL语句之间的相互转 ...

  3. iOS has conflicting provisioning settings 解法

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  4. loadrunner转码两种方式

    1.//使用转换函数将resp值做编码转换并存入msg lr_convert_string_encoding(“佛挡杀佛”),"utf-8",NULL,"msg" ...

  5. postgres 11 单实例最大支持多少个database?

    有人在pg8时代(10年前)问过,当时说10000个没问题,而且每个db会在/base下建立1个文件夹, 文件ext3只支持32000个子文件夹,所以这是上限了. 而现在早就ext4了,根本没有限制了 ...

  6. [Linux] 关闭防火墙以及开放端口

    一. service iptables stop 临时关闭, chkconfig iptables off完全关闭 service iptables status状态, service iptable ...

  7. Java核心技术卷一 · 笔记(1)

    目录 1.java的关键术语 2.==和equals 3.空串与 Null 串 4.构建字符串 5.封装 6.对象的三个主要特性 7.依赖(dependence).聚合(aggregation).继承 ...

  8. SpringBoot整合Mybatis注解版---update出现org.apache.ibatis.binding.BindingException: Parameter 'XXX' not found. Available parameters are [arg1, arg0, param1, param2]

    SpringBoot整合Mybatis注解版---update时出现的问题 问题描述: 1.sql建表语句 DROP TABLE IF EXISTS `department`; CREATE TABL ...

  9. windows 安装xadmin

    1.访问github :https://github.com/sshwsfc/xadmin 2.新建README.rst 并替换到下载的zip文件中 3.cmd下,进入虚拟环境使用pip instal ...

  10. Django框架简介-路由系统

    2.2 路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 你就是 ...