摘要：值得注意的是如果我们是将页面中原有的节点插入到指定节点的子节点列表的最后面，那这个被插入的节点会先从原有的位置移除，再插入到指定的位置。
Node 对象提供了一些用于向 HTML 页面插入节点的方法，通过这些方法我们可以实现向 HTML 页面新增元素，或者移动 HTML 页面中的元素。
appendChild() 方法Node 对象提供的 appendChild() 方法可以向指定节点的子节点列表的最后添加一个新的子节点。其语法结构如下:
var child = node.appendChild(child);
在上述语法结构中，appendChild() 方法的参数 child 表示添加的新的子节点，同时该子节点也是 appendChild() 方法的返回值。
我们可以通过如下代码示例，学习 appendChild() 方法的使用:
var parent = document.getElementById("parent");
var button = document.createElement("button");
button.setAttribute("class","button");
var text = document.createTextNode("A New Button");
button.appendChild(text);
// 将新节点添加到父节点中
parent.appendChild(button);
在上述代码示例中，我们创建了一个新的 元素，并且将这个 元素添加到指定节点的子节点列表的最后面。
值得注意的是: 如果我们是将 HTML 页面中原有的节点插入到指定节点的子节点列表的最后面，那这个被插入的节点会先从原有的位置移除，再插入到指定的位置。
如下代码示例，就是将 HTML 页面原有的节点插入到指定位置:
var parent = document.getElementById("parent");
var button = document.getElementById("btn");
// 将新节点添加到父节点中
parent.appendChild(button);
insertBefore() 方法值得注意的是: appendChild() 方法只能允许在同一个 HTML 页面中实现插入节点的功能，而不能实现跨 HTML 页面的插入节点的功能。
Node 对象除了提供了 appendChild() 方法可以实现插入节点之外，还提供了 insertBefore() 方法同样可以实现插入节点的功能。其语法结构如下:
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
由于 insertBefore() 方法实现的是将一个节点插入到指定节点的某个子节点的前面。所以，在上述语法结构中:
参数 referenceElement 表示指定节点的某个子节点
参数 newElement 表示插入的节点
调用 insertBefore() 方法的 parentElement 表示指定的节点
作为返回值的 insertedElement 表示被插入的节点，即 newElement
我们可以通过如下代码示例，学习 insertBefore() 方法的使用:
// 获取目标父节点
var parentElement = document.getElementById("parent");
// 创建新节点
var newElement = document.createElement("button");
newElement.setAttribute("class","button");
var text = document.createTextNode("A New Button");
newElement.appendChild(text);
// 获取目标节点
var referenceElement = document.getElementById("btn");
// 将新节点添加到父节点中
parentElement.insertBefore(newElement, referenceElement);
值得注意的是: 如果我们是将 HTML 页面中原有的节点插入到指定节点的某个子节点的前面，那这个被插入的节点会先从原有的位置移除，再插入到指定的位置。
如下代码示例，就是将 HTML 页面原有的节点插入到指定位置:
// 获取目标父节点
var parentElement = document.getElementById("parent");
// 获取被插入的节点
var newElement = document.getElementById("button");
// 获取目标节点
var referenceElement = document.getElementById("btn");
// 将新节点添加到父节点中
parentElement.insertBefore(newElement, referenceElement);
关于 insertAfter() 方法值得注意的是: 如果 referenceElement 为 null 则 newElement 将被插入到子节点的末尾。
我们需要注意的是，Node 对象中并没有提供 insertAfter() 方法。所以，我们并不能像使用 jQuery 中的 insertAfter() 方法一样使用。
但是，如果我们在开发中需要 insertAfter() 方法的话，是可以利用 insertBefore() 方法来实现的。
实现思路其实就是利用 insertBefore() 方法将被插入的节点插入到指定节点的下一个相邻兄弟的前面，最终实现插入到指定节点的后面的效果。
parentElement.insertBefore(newElement, referenceElement.nextSibling);
但由于主流浏览器存在空白节点的问题，所以，在真正实现时不能简单地直接通过 nextSibling 属性来解决的。
最后，真正可以实现 insertAfter() 方法的主要逻辑如下:
var nextElement = referenceElement.nextSibling;
if(nextElement.nodeType === 3){
nextElement = nextElement.nextSibling;
}
parentElement.insertBefore(newElement, nextElement);
如果 referenceElement 没有下一个相邻的兄弟节点的话，那 referenceElement 一定是该子节点列表的最后一个子节点。这样 referenceElement.nextSibling 返回的值为 ull，newElement 就会被插入到子节点列表的最后面。
值得注意的是: 关于 insertAfter() 方法，我们这里只是提供了一个解决的思路。在具体使用时，可能封装的具体用法也会不同。
本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。
本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84448.html
摘要：对象的作用树结构主要是依靠节点进行解析，称为节点树结构。对象的继承链关系对象是继承于对象的，是一个用于接收事件的对象。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Node 对象，该对象主要提供了用于解析 DOM 节点树结构的属性和方法。 Node 对象的作用 DOM 树结构主要是依靠节点进行解析，...
摘要：系列教程是一套免费开源，任何人都可以免费学习分享，甚至可以进行修改。本文是这套系列教程的索引也就是目录第一回介绍在最开始，我们先来了解是什么的作用，以及浏览器的支持是怎么样的。 《EASYDOM》系列教程是一套免费、开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。 本文是这套系列教程的索引（也就是目录）: 第一回 DOM 介绍 在最开始，我...
摘要：对象提供了方法实现从页面中删除指定节点。其语法结构如下在上述语法结构中，调用方法的表示参数的父节点，而参数则表示要删除的那个节点。则用于存储要删除的节点的引用，即。 Node 对象提供了 removeChild() 方法实现从 HTML 页面中删除指定节点。其语法结构如下: var oldChild = node.removeChild(child); OR element.remov...
摘要：也就是说，它没有父节点。如果参数设为，则不克隆它的任何子节点。为了防止一个文档中出现两个重复的元素使用方法克隆的节点在需要时应该指定另外一个与原值不同的。 Node 对象提供了 cloneNode() 方法实现 HTML 页面中节点的复制功能。其语法结构如下: var dupNode = node.cloneNode(deep); 在上述语法结构中，调用 cloneNode() 方法的...
摘要：参数则表示页面中被替换的节点。方法的返回值也是被替换的节点，即。如果该节点已经存在于节点树结构中的话，则它会被从原始位置删除。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Node 对象提供了 replaceChild() 方法实现 HTML 页面中节点的替换功能。其语法结构如下: replacedNode = parentN...
阅读 1761·2021-11-09 09:46
阅读 2351·2019-08-30 15:52
阅读 2278·2019-08-30 15:47
阅读 1122·2019-08-29 17:11
阅读 1663·2019-08-29 15:24
阅读 3366·2019-08-29 14:02
阅读 2348·2019-08-29 13:27
阅读 1084·2019-08-29 12:32
