insertBefore方法,及如何实现insertAfter方法

js原生方法insertBefore用于在某个元素之前插入新元素
定义:

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

语法: parentElement.insertBefore(newElement, referElement)

值得注意的是
1. 如果要插入的newElement已经在DOM树中存在,那么执行此方法会将该节点从DOM树中移除。
2. 如果referElement为null,那么`newElement会被添加到父节点的子节点末尾

既然JS原生不存在insertAfter方法,要如何实现该功能呢?

元素节点还有一个属性: nextSibling,即指向元素的下个兄弟元素,如果已经是末尾子节点则为null。

基于以上,就可以实现insertAfter功能

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

(引自:https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值