使用的相关知识点：对子节点的添加：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. 骨灰级玩家体验带你测试体验天使纪元OL折扣端

    刘亦菲代言吸引了我才进入游戏的(不知道有多少人和我一样)这个游戏没有一些骨灰级玩家带,真的很费时间费钱.   天使纪元5折折扣端(点击下载),其实是一个良心老平台,苹果,安卓.H5都支持的平台,采用最 ...

  2. Mysql 5.7--ubuntu18.04 安装过程及遇到的问题

    Mysql 5.7安装过程 1. 下载mysql的apt-config文件 a. https://dev.mysql.com/downloads/file/?id=477124 b. 点击downlo ...

  3. 工作中常用的 Linux 命令

    awk 示例: env变量值如下,需要获得pkg_url的链接值: {"name": "michael", "sex": "mal ...

  4. 区别samtools faid产生的.fai文件功能和bwa index 产生的四个文件的功能

    samtools faidx 能够对fasta 序列建立一个后缀为.fai 的文件,根据这个.fai 文件和原始的fastsa文件, 能够快速的提取任意区域的序列 用法: samtools faidx ...

  5. kali linux 使用笔记本快捷键调节音量

    环境:kali 2018.3a(xface桌面版),自带PulseAudio控制音量. 以前在windows时笔记本是Fn+F1这些来调节音量的,装了kali后原来调节亮度.触控板的键还能用,唯独音量 ...

  6. script 修改 plist遇到的问题

    一个sh脚本每次build的时候动态修改info.plist文件 达到动态更改版本号的目的 但是估计是因为缓存的缘故 每次只有clean之后再运行才会修改成功 看script执行的log 好像是先修改 ...

  7. 蓝牙 - 小米手环3 NFC版BLE协议研究

    0x01 前言 最近买到了小米手环3nfc版本,基本上实现了我对手环的所有功能需求,高中的时候就缠线圈做过戒指一卡通,但是缺陷是不好看,而且只能储存一张卡,等 手环3nfc版我认为比较好的功能 可以储 ...

  8. ubuntu 创建文件夹和删除文件

    创建 名为docker的文件夹 :mkdir docker 删除 名为docker的文件夹 : rm docker 创建名为docker-compose.yml的文件 : vi docker-comp ...

  9. JAVA程序设计的第一次作业

    这是我第一次接触博客,刚开始用博客很生疏,感觉很麻烦,但是后来慢慢从老师那里了解到了许多博客可以带给我们的便利.通过博客,我们不仅可以记录自己从刚开始进入程序学习的懵懵懂懂到后来想要学,想深究,想探讨 ...

  10. 自动化定位——通过XPath定位元素

    XPath是一种XML文档中定位元素的语言.该定位方式也是比较常用的定位方式 1通过属性定位元素 find_element_by_xpath("//标签名[@属性='属性值']") ...