insertAfter小函数

最新推荐文章于 2020-04-08 23:24:00 发布

原创最新推荐文章于 2020-04-08 23:24:00 发布 · 858 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小方法函数 #nextSibling和previous

web 前端css 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用DOM API在指定元素之后插入新元素的方法。通过利用insertBefore和nextSibling属性，可以实现在现有DOM结构中任意位置添加新节点的需求。

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

在Dom提供的方法中，只能在元素之前插入元素--insertBefore；或者在父级节点最后添加--appendChild；

实际的应用中，有可能会碰到在特定元素之后添加元素的。利用insertBefore和nextSiblinge可以解决这个问题

<body onload="insertP()">
	<p id="target">插入到这个文字之后</p>
    <p>也就是插入这段文字之前，但是这段文字没有ID，无法取得</p>

</body>

=======================

js代码：

	function insertAfter(newElement,targetElement){
		//首先得到targetElement元素的父节点
		var parentEle = targetElement.parentNode;
		if(parentEle.lastChild==targetElement){
			targetElement.appendChild(newElement);
			}
		else{
			parentEle.insertBefore(newElement,targetElement.nextSibling);
			}
		}
	function insertP(){
		var oldP = document.getElementById("target");
		var newP = document.createElement("p");//新建节点
		var oText = document.createTextNode("插入时试试");
		newP.appendChild(oText);
		insertAfter(newP,oldP);
		
		}