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);
	}
}

赏

谢谢你请我吃糖果

支付宝

微信