JS案例六_1:添加城市
使用的相关知识点：对子节点的添加：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:添加城市的更多相关文章
- JS案例六_2：省市级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS案例 - 城市三级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Knockout.Js案例一Introduction
</strong></p> <p>Last name: <strong data-bind="text:lastName ">tod ...
- JS对select动态添加option操作 （三级联动） （搜索拼接）
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- 原生Js汉语拼音首字母匹配城市名/自动提示列表
根据城市的汉语名称首字母把城市排序,基本思路: 1.处理数据,按照需要的格式分别添加{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQR ...
- js案例之使用正则表达式进行验证数据正确性
#js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...
- KingbaseES V8R3集群维护案例之---在线添加备库管理节点
案例说明: 在KingbaseES V8R3主备流复制的集群中 ,一般有两个节点是集群的管理节点,分为master和standby:如对于一主二备的架构,其中有两个节点是管理节点,三个数据节点:管理节 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
随机推荐
- Android文件各种存储路径的比较
1.File cacheDir = context.getCacheDir(); 应用内部存储空间(数据文件私有)文件存储到这个路径下,不需要申请权限,当应用被卸载的时候,目录下的文件会被删除. 需要 ...
- BUTXO详解
在比原链中,每个交易消耗之前交易生成的BUTXO 然后生成新的 BUTXO,账户的余额即所有属于该地址的未花费 BUTXO 集合,BTM 的全局状态即当前所有未花费的BUTXO 集合.我们用一个具体的 ...
- 【我的前端自学之路】【HTML5】web 存储
以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...
- python程序—名片管理系统
创建一个名片管理系统,实现增.删.改.查.四项功能 listcard = [] while True: print('**********欢迎来到名片管理系统**********') print(' ...
- MySQL及navicat for mysql中文乱码
转载自:https://www.cnblogs.com/mufire/p/6697994.html 修改完之后记着重启mysql服务,在服务里边重启,即可生效! 全部使用utf8编码 MySQL中文乱 ...
- DataTable转实体类
/// <summary> /// DataTable与实体类互相转换 /// </summary> /// <typeparam name="T"& ...
- Python玩转Arduino——简单介绍
关于Python语言的介绍安装请参考廖雪峰的Python教程 Python是一门解释型语言,虽然不能够像c语言一样编译上传到Arduino--什么你说MicroPython,我们再说Arduino呢- ...
- python cookbook 小结
最近一直在看python cookbook.这本书主要讲的是python 语言的一些编程素材.正如它的名字一样,烹饪书.就好像再讲如何处理食材(各种类型的数据),然后再煮菜(算法).打个比方,煮菜随便 ...
- 《图解Java多线程设计模式》读书笔记
略读中...后面详读的时候,补充经典图片和文字说明
- Python入门（二）列表、字典、字符串、元组、集合
列表list什么是列表:Python内置的一种数据类型是列表,list是一种有序的集合,可以随时添加和删除其中的元素 创建List列表的方法 L = ['杨俊辰',‘啦啦啦’,'Tom'] empty ...