JS：appendChild()和insertBefore()

最新推荐文章于 2023-01-09 01:38:14 发布

鬼眼邪神

最新推荐文章于 2023-01-09 01:38:14 发布

阅读量632

点赞数

分类专栏： JS 文章标签： javascript appendChild insertBefore

本文链接：https://blog.csdn.net/u010200222/article/details/45622693

版权

JS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

appendChild()

该方法可以将节点添加到给定节点的子节点列表的末尾，并返回对插入的节点的引用。如果所添加的节点是文档片段，则将文档片段的全部内容移至该节点的子列表中。

语法

childNode = elementNode.appendChild(newNode)

参数

newNode

要添加的节点。

elementNode

要为该节点添加一个子节点。

childNode

返回对插入的节点的引用。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>鬼眼邪神的博客</title>
		<script>
			window.οnlοad=function (){
				var one=document.getElementById("one");
				//创建一个span元素节点
				var span=document.createElement("span");
				//创建一个文本节点
				var spanContent=document.createTextNode("，地址：http://cyg7561.blog.163.com/");
				//将文本节点添加到span元素节点中
				span.appendChild(spanContent);
				//将span元素节点追加到id="one"的div元素节点中
				one.appendChild(span);
			}
		</script>
	</head>

	<body>
		<div class="one" id="one">
			鬼眼邪神的博客
		</div>
	</body>
</html>

注意事项

如果文档树中已经存在了newNode，它将从文档树中删除，然后重新插入它的新位置。如果newNode是DocumentFragment节点，则不会直接插入它，而是把它的子节点按序插入当前节点的childNodes[]数组的末尾。

注意，来自一个文档的节点（或由一个文档创建的节点）不能插入另一个文档。也就是说，newNode的ownerDocument属性必须与当前节点的ownerDocument属性相同。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>鬼眼邪神的博客</title>
		<script>
			window.οnlοad=function (){
				var one=document.getElementById("one");
				var two=document.getElementById("two");
				//由于two元素节点已经在文档树中存在，所以two元素节点会先从文档树中被删除，然后再重新插入到其父元素节点的子节点列表的末尾。
				one.parentNode.appendChild(two);
			}
		</script>
	</head>

	<body>
		<div class="two" id="two">
			地址：<a href="http://cyg7561.blog.163.com/" title="鬼眼邪神">http://cyg7561.blog.163.com/</a>
		</div>
		<div class="one" id="one">
			鬼眼邪神的博客
		</div>
	</body>
</html>

insertBefore()

该方法可在已有的子节点前插入一个新的子节点，并返回对新的子节点的引用。如果所添加的节点是文档片段，则将文档片段的全部内容移至该节点的子列表中。

语法

childNode = elementNode.insertBefore(newNode,elementChildNode)

参数

newNode

要添加的子节点。

elementNode

要为该节点添加一个子节点。

elementChildNode

在此节点前插入新节点。如果此处为空，那么insertBefore()就相当于appendChild()。

childNode

返回对插入的节点的引用。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>鬼眼邪神的博客</title>
		<script>
			window.οnlοad=function (){
				var one=document.getElementById("one");
				//创建一个span元素节点
				var span=document.createElement("span");
				//创建一个文本节点
				var spanContent=document.createTextNode("地址：http://cyg7561.blog.163.com/");
				//将文本节点添加到span元素节点中
				span.appendChild(spanContent);
				//将span元素节点插入到one节点之前
				one.parentNode.insertBefore(span,one);
			}
		</script>
	</head>

	<body>
		<div class="one" id="one">
			鬼眼邪神的博客
		</div>
	</body>
</html>

注意事项

注意，来自一个文档的节点（或由一个文档创建的节点）不能插入另一个文档。也就是说，newNode的ownerDocument属性必须与当前节点的ownerDocument属性相同。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>鬼眼邪神的博客</title>
		<script>
			window.οnlοad=function (){
				var one=document.getElementById("one");
				var two=document.getElementById("two");
				//由于two元素节点已经在文档树中存在，所以two元素节点会先从文档树中被删除，然后再重新插入新的位置。
				one.parentNode.insertBefore(two);
			}
		</script>
	</head>

	<body>
		<div class="two" id="two">
			地址：<a href="http://cyg7561.blog.163.com/" title="鬼眼邪神">http://cyg7561.blog.163.com/</a>
		</div>
		<div class="one" id="one">
			鬼眼邪神的博客
		</div>
	</body>
</html>

鬼眼邪神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS：appendChild()和insertBefore()

appendChild()该方法可以将节点添加到给定节点的子节点列表的末尾，并返回对插入的节点的引用。如果所添加的节点是文档片段，则将文档片段的全部内容移至该节点的子列表中。语法childNode = elementNode.appendChild(newNode)参数 newNode 要添加的节点。 elementNode 要为该节点添加一个子节点。 childNode 返
复制链接

扫一扫