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

站长资源 2024/11/26 佚名

32 1538 32

DDR爱好者之家 Design By 杰米

本文实例讲述了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>

运行结果：

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>

运行结果：

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>

运行结果：

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>

运行结果：

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

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

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

JavaScript,HTML,DOM,元素,节点,新增,编辑,删除

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析”

暂无评论...

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

createElement

createTextNode

appendChild（它用于添加新元素到尾部）

insertBefore（新元素添加到开始位置）

removeChild

replaceChild

JS造成内存泄漏的几种情况实例分析

JavaScript中break、continue和return的用法区别实例分析

评论“JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接