JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析


Posted in Javascript onMarch 02, 2020

本文实例讲述了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作。分享给大家供大家参考,具体如下:

createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild

createElement

以下代码是用于创建 <p> 元素:

var para = document.createElement("p");

createTextNode

为 <p> 元素添加文本节点:

var node = document.createTextNode("这是一个新的段落。");

appendChild(它用于添加新元素到尾部)

将文本节点添加到 <p> 元素中:

para.appendChild(node);

以上3个结合案例: 

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p"); //创建p标签
var node = document.createTextNode("这是一个新的段落。"); //添加文本节点
para.appendChild(node); //向p标签添加文本节点(内容)
var element = document.getElementById("div1");
element.appendChild(para); //添加到已存在的元素中
</script>

运行结果: 

JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析 

insertBefore(新元素添加到开始位置)

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

运行结果: 

JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析 

removeChild

要移除一个元素,你需要知道该元素的父元素。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

运行结果:

JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析 

replaceChild

使用 replaceChild() 方法来替换 HTML DOM 中的元素。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div> 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

运行结果:

JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
JS 实现分页打印功能
May 16 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 #Javascript
Vue Router的手写实现方法实现
Mar 02 #Javascript
ES6中Set和Map用法实例详解
Mar 02 #Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 #Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 #Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 #Javascript
原生js实现日历效果
Mar 02 #Javascript
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
基于php-fpm的配置详解
2013/06/03 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Python:slice与indices的用法
2019/11/25 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
最新教师自我评价分享
2013/11/12 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
工作失误检讨书
2015/01/26 职场文书
教师节老师寄语
2015/05/28 职场文书
班主任开场白
2015/06/01 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
关于JavaScript轮播图的实现
2021/11/20 Javascript
Python语言中的数据类型-序列
2022/02/24 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL