原生JavaScript封装insertAfter方法

最新推荐文章于 2024-08-13 21:02:23 发布

原创最新推荐文章于 2024-08-13 21:02:23 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #jquery

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用原生JavaScript在指定元素后插入新节点的方法，适用于网页开发中常见的需求场景。通过一个简单的函数实现，即使在没有jQuery的情况下也能轻松完成元素的插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网站开发的应该都遇到过这个问题，在指定位置后面，添加我们需要的节点，但是HTML提供的方法，只有insertBefore()，在指定的已有子节点之前插入新的子节点。虽然JQuery已经为我们提供了，insertAfter()
方法，但是，还是有必要了解一下如何用原生javaScript语言来写自己封装方法。

javaScript代码：

function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	// 如果最后的节点是目标元素，则直接添加
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement)
	}else{
		//如果不是，则插入在目标元素的下一个兄弟节点 的前面
		parent.insertBefore(newElement,targetElement.nextSibling)
	}
}

使用就比较简单啦。

当然，如果想使用JQuery方法，直接调用即可，$(content).insertAfter(selector)。

前端小虾米，不足之处请大家多多指教！谢谢！