<!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("ul1");
//2.创建城市文本节点
var textNode = document.createTextNode("深圳");//深圳
//3.创建li元素节点
var liEle = document.createElement("li");//<li></li>
//4.将城市文本节点添加到li元素节点中去
liEle.appendChild(textNode);//<li>深圳</li>
//5.将li添加到ul中去
ulEle.appendChild(liEle);
}
}
</script>
</head>
<body>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>JavaScript DOM学习笔记--创建追加元素
2018-05-17
1109
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
动态添加城市 window.onload = function(){ document.
目录
相关文章
|
24天前
|
JavaScript
前端开发
Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
28
1
1
|
9天前
|
JavaScript
前端开发
索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。
73
49
49
|
10天前
|
JavaScript
前端开发
开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法，JavaScript 可以实现丰富的网页交互效果，如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中，开发者可以根据具体的需求和场景，选择合适的 DOM 元素操作方法来实现所需的功能，为用户提供更加流畅和动态的网页体验。
36
4
4
|
10天前
|
JavaScript
前端开发
|
1月前
|
移动开发
JavaScript
前端开发
|
1月前
|
JavaScript
|
10天前
|
JavaScript
前端开发
API
|
1月前
|
JavaScript
|
1月前
|
JavaScript
前端开发
索引
|
1月前
|
JavaScript
前端开发
容器
热门文章
最新文章
1
HTML DOM 教程Part1
2
JavaScript 技术篇-js获取dom节点、html标签自定义属性的值。
3
jquery 遍历dom元素
4
JQuery利用sort对DOM元素进行排序
5
DOM XSS Scanner - Find DOM based XSS Security Vulnerabilities
6
Dom4j应用总结
7
React中的Virtual DOM(看这一篇就够了)
8
获取兼容的DOM子节点
9
节点操作,节点属性的操作及DOM event事件
10
DOM中的动态NodeList与静态NodeList
1
前端框架与库 - Vue.js基础：模板语法、数据绑定
134
2
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
261
3
js【详解】arr.reduce() 数组缩减
45
4
【vue】 vue2 | js 实现数字滚动效果
104
5
【vue】 网站动态背景 | vanta.js的使用
410
6
JavaScript进阶-JavaScript库与框架简介
57
7
DVWA JavaScript 通关解析
66
8
WEB三大主流框架之Vue.js
44
9
断网之后的页面，Autox.js是点击还是上下滑动比较好？
60
10
autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
216