使用的相关知识点：对子节点的添加：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. net应用程序池自动关闭的解决方法

    while (true) { using (ServerManager sm = ServerManager.OpenRemote("localhost")) { string p ...

  2. 不小心跳进安装Django-redis的坑

    为了写缓存这一块,我用pip install django-redis安装Django-redis. 它也把我的Django更新到最新了,我回头看下面的截图才发现的,把我的Django从1.8.2更新 ...

  3. HDU 5919 Sequence II（主席树）题解

    题意:有A1 ~ An组成的数组,给你l r,L = min((l + ans[i - 1]) % n + 1, (r + ans[i - 1]) % n + 1),R = max((l + ans[ ...

  4. 论文笔记：Auto-ReID: Searching for a Part-aware ConvNet for Person Re-Identification

    Auto-ReID: Searching for a Part-aware ConvNet for Person Re-Identification 2019-03-26 15:27:10 Paper ...

  5. linux下ifconfig命令看不到IP centos7——ens33

    当前环境VMware15+centos7  在终端输入ifconfig后没有开到IP地址: 解决方法:root用户执行命令 cd /etc/sysconfig/network-scripts/ vi ...

  6. Gradle 依赖管理

    依赖管理(在 build.gradle 中): 1.定义依赖仓库(repositories): Gradle 要求至少定义一个依赖仓库,依赖仓库可以是文件系统,也可以是中心服务器.最常用的是 jcen ...

  7. error CS1002: ; expected 错误解决

    一般出现这种错误,大概原因是因为前端页面里的C#代码少个分号,或少个括号 导致编译器出错:仔细检查页面中的C#代码是否写的正确. 我之所以出现这个错误是因为前台页面中:@{  } 这里的代码少一个括号 ...

  8. 遇到的Cocos2dx问题

    平时工作中,多多少少,总会遇到些棘手的问题,此文章会不断更新,避免下次再入坑  Cocos 官方相关下载 https://github.com/fusijie/Cocos-Resource Easin ...

  9. 高性能异步Socket框架

    Server: using System; using System.Collections.Generic; using System.Diagnostics; using System.Text; ...

  10. C++之标准库vector

    目录 1.成员函数 2.元素访问 3.迭代器iterator 4.容量capacity 5.修改函数 std::vector是一个封装动态数组的序列容器 std::pmr::vector是一个使用多态 ...