insertAfter实现

用原生JS实现在一个dom元素后插入新的节点?

在js的dom api中有insertBefore()方法 在已知子节点的前面插入新的子节点。
然而并没有提供insertAfter()方法,在实际开发中遇到了这个问题,自己编写了一个insertAfter方法,运用现有的dom方法属性。

	/**
	 * 指定的现有节点之后插入新的节点
	 * 
	 * @param {Node} newNode 需要插入的节点对象
	 * @param {Node} existingNode 现有的节点
	 */
	function insertAfter(newNode, existingNode) {
		// 获取现有节点的父元素
		const parent = existingNode.parentNode;

		// 如果父元素中的最后一个子元素 等于 现有的节点
		if (parent.lastChild === existingNode) {
			// 把现有节点放入父元素子节点后面
			// appendChild在子节点后面追加一个元素
			parent.appendChild(newNode);
		} else {
			// .nextSibling 该属性返回指定节点后的第一个节点
			// insertBefore 第一个参数插入的节点对象,第二参数可选,在其之前插入子节点,如果不传,则在结尾插入。
			parent.insertBefore(newNode, existingNode.nextSibling);
		}
	}
复制代码
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值