使用的相关知识点：对子节点的添加：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. git checkout --ours 【学习笔记】

    用新分支:git checkout --theirs 文件用master分支:git checkout --ours 文件 执行之后git add

  2. Web 端异步下载文件

    Web 端异步下载文件 实现文件异步下载: 在服务端无法返回文件,或发生异常时给予提示. JavaScript: 服务端返回的JSON对象形如: { code:200, msg:'下载成功|未找到指定 ...

  3. chromdriver与geckodriver和浏览器版本问题

    chromdriver74与chrom74对应 geckodriver024与Firefox66对应 亲测有效

  4. sublime text 3安装

    输入快捷键:shift+ctrl+p, 打开安装界面,先要安装install package control,然后选择install package. 增加编译环境,ctrl + b 执行. 安装如下 ...

  5. Pycharm快捷键设置（鼠标滚动控制字体大小）

    一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...

  6. Windows下安装Anaconda

    Windows下安装Anaconda   Anaconda介绍 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.因为包含了大量的科学 ...

  7. 《R语言入门与实践》第七章:程序

    前言 这一章讲了程序设计的相关知识,经过了: 算法分析 编码 得到最后的程序. if 语句 格式:if (this) {that} else if { another} else { another ...

  8. ftp定时任务-日志备份

    1. 安装 #yum -y install vsftpd 2. 修改配置文件 #vi /etc/vsftpd/vsftpd.conf FTP服务器的默认目录是/var/ftp,而且当用户以匿名方式登录 ...

  9. 博弈论初步（SG函数）

    讲解见此博客https://blog.csdn.net/strangedbly/article/details/51137432 理解Nim博弈,基于Nim博弈理解SG函数的含义和作用. 学习求解SG ...

  10. 学习node.js的一些笔记

    最近看了几眼node.js,以前曾听说它用途很大. 在菜鸟教程上,已看了过半的内容:http://www.runoob.com/nodejs/nodejs-web-module.html,如今看到了这 ...