我们知道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>