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 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
理解javascript中的with关键字
Feb 15 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
详解webpack2+React 实例demo
Sep 11 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 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 MVC
2014/09/10 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
javaScript基础详解
2017/01/19 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
Vue.set 全局操作简单示例
2019/09/19 Javascript
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
不可错过的十本Python好书
2017/07/06 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
几个数据库方面的面试题
2016/07/01 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
2014年安全生产责任书
2014/07/22 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
合作意向协议书
2015/01/29 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2016年教师节感言
2015/12/09 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL