insertbefore和appendchild的区别,append insert

我们知道DOM API中有inserBefore和appendChild方法,但是好像并没有insertAfter方法(将一个结点插入另一个节点的后面)。其实也insertAfter也不是很有必要,我们也可以利用inserBefore和appendChild自己写一个insertAfter函数。

一、insertBefore的用法:
该Node.insertBefore()方法在参考节点之前插入一个节点,作为指定父节点的子节点。

let insertedNode = parentNode.insertBefore(newNode, referenceNode)

insertBefore参数:

insertedNode:
插入的节点(与相同newNode)
parentNode:
新插入的节点的父级。
newNode:
要插入的节点。
referenceNode:
在其之前newNode插入的节点。如果为 null,则将newNode其插入parentNode的子节点的末尾

二、Node.appendChild() 使用方法:
将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中,那么appendChild() 只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。

element.appendChild(aChild)

Node.appendChild()的参数:

aChild
要追加给父节点(通常为一个元素)的节点。

三、利用insertBefore和appendChild实现insertAfter函数:
先是判断目标节点后面是否有兄弟节点,如果有,则利用insertBefore()将待插入节点插入兄弟节点前面。若没有兄弟节点则利用appendChild将 待插入节点直接插入目标节点后面即可。

<script> // target 是DOM里已经存在的元素 // aim 是要插入的新元素 function insertAfter(target, aim) { target.nextSibling ? target.parentNode.insertBefore(aim, target.nextSibling) : target.parentNode.appendChild(aim); }</script>

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注