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 相关文章推荐
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
jquery事件与绑定事件
Mar 16 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
js禁止表单重复提交
Aug 29 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
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下对字符串的递增运算代码
2010/08/21 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python制作词云图代码实例
2019/09/09 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python和JavaScript哪个容易上手
2020/06/23 Python
Java的for语句中break, continue和return的区别
2013/12/19 面试题
主治医师岗位职责
2013/12/10 职场文书
中秋节超市促销方案
2014/01/30 职场文书
班主任工作经验材料
2014/02/02 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
家长会主持词
2014/03/26 职场文书
就业协议书怎么填
2014/09/15 职场文书
设备收款委托书范本
2014/10/02 职场文书
西安兵马俑导游词
2015/02/02 职场文书
python中的被动信息搜集
2021/04/29 Python
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
Python数组变形的几种实现方法
2022/05/30 Python
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL