使用的相关知识点：对子节点的添加：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. 我的第一篇博客。(JavaScript的声明和数据类型的一些笔记)

    这是我的第一篇博客,务必请大家多多关照. 下面是前端js的变量和数据类型的一些笔记,不是很全请多多包涵. 1.变量 变量的声明 var 变量名 变量这个容器中放的是数据 变量的赋值 变量名 = 数据 ...

  2. Microsoft.AspNet.Web.Optimization.Bundle的完美替换方案

    Web应用程序中包含大量的样式(css)和脚本(js)文件,这些文件的引用.管理和发布有很多解决方案.在Asp.Net MVC应用程序中,大家最熟悉的解决方案应属Microsoft.AspNet.We ...

  3. spring mvc 简单的文件上传与下载

    上传文件有很多种方法,这里主要讲解的是spring mvc内提供的文件上传 前提使用:spring mvc 在这个之前我们需要把环境给配置好 1:springmvc的XML配置文件加上这一段就即可, ...

  4. SSH实现ajax

    (1)首先要引入需要pom文件 <!-- https://mvnrepository.com/artifact/org.apache.struts/struts2-json-plugin --& ...

  5. selenium-xpath练习

  6. 虹软离线人脸识别 ArcFace 2.0 Demo [C++]

    环境: win10(10.0.16299.0)+ VS2017 sdk版本:ArcFace v2.0 OPENCV3.43版本 x64平台Debug.Release配置都已通过编译 下载地址:http ...

  7. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  8. 设置RHEL-7.0的运行级别

    在RHEL7中修改默认运行级别与7以前版本的修改方式不同(7以前版本可以修改/etc/inittab中的“id:5:initdefault:”参数值来实现),RHEL7在/etc/inittab文件中 ...

  9. CHM文件命令转换成html

    在Windows下chm转换为html的超简单方法(反编译CHM文件的方法) 通过调用Windows命令,将chm 文件转换为html 文件. 方法: 命令行(cmd),输入hh -decompile ...

  10. The Last Week

    二轮省选前的最后一周了呢. 一路走到这里,真的很希望能继续走下去. 好好调整一下状态,争取能有机会买D吧(虽然现在似乎D也没什么用了 day1 多项式 多项式ln 多项式exp day2 数据结构 L ...