element.append() node.appendChild() Element.prototype.append() Node.prototype.appendChild()

最新推荐文章于 2023-07-31 11:18:37 发布

kfepiza

最新推荐文章于 2023-07-31 11:18:37 发布

阅读量420

点赞数

本文链接：https://blog.csdn.net/kfepiza/article/details/130549544

版权

HTML CSS JS 同时被 2 个专栏收录

80 篇文章 2 订阅

订阅专栏

Js JavaScript ECMAScript

48 篇文章 0 订阅

订阅专栏

element.append() node.appendChild() Element.prototype.append() Node.prototype.appendChild()

在这里插入图片描述

element.append() , Element.prototype.append()

Element.append()方法在元素的最后一个子元素之后插入一组Node对象或DOMString对象。DOMString对象作为等效Text节点插入。

不同于 Node.appendChild():

Element.append()允许您也附加DOMString对象，而Node.appendChild()只接受Node对象。
Element.append()没有返回值，而Node.appendChild()返回追加的Node对象。
Element.append()可以追加多个节点和字符串，而Node.appendChild()只能追加一个节点。

语法
append(…nodesOrDOMStrings)

参数
nodesOrDOMStrings
要插入的一组Node或DOMString对象。

异常
HierarchyRequestError：无法在层次结构中的指定点插入节点。
示例
附加元素

let div = document.createElement("div")
let p = document.createElement("p")
div.append(p)
console.log(div.childNodes) // NodeList [ <p> ]

追加文本

let div = document.createElement("div")
div.append("Some text")
console.log(div.textContent) // "Some text"

追加元素和文本

let div = document.createElement("div")
let p = document.createElement("p")
div.append("Some text", p)
console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]

append方法是不可分的
append()方法的作用域未限定在with语句中。有关详细信息，请参见Symbol.unscopables。

let div = document.createElement(“div”)
with(div) {
append(“foo”)
}
// ReferenceError: append is not defined
规范文档
Specification
DOM Standard (DOM)# ref-for-dom-parentnode-append①
浏览器兼容性
在这里插入图片描述

参阅
Element.prepend()
Node.appendChild()
Element.after()
Element.insertAdjacentElement()
NodeList

node.appendChild() , Node.prototype.appendChild()

Node.appendChild
Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用 Node.cloneNode() 方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用 cloneNode 制作的副本不会自动保持同步。

如果给定的子节点是 DocumentFragment，那么 DocumentFragment 的全部内容将转移到指定父节点的子节点列表中。

备注：有更加新的 API 可供使用！ > ParentNode.append() (en-US) 方法支持多个参数，接受字符串作为参数，会将字符串转换为文本节点再附加。

语法
element.appendChild(aChild)
参数
aChild
要追加给父节点（通常为一个元素）的节点。
返回值
返回追加后的子节点（aChild），除非 aChild 是一个文档片段（DocumentFragment），这种情况下将返回空文档片段（DocumentFragment）。

附注
如果你需要保留这个子节点在原先位置的显示，则你需要先用Node.cloneNode方法复制出一个节点的副本，然后在插入到新位置。

这个方法只能将某个子节点插入到同一个文档的其他位置，如果你想跨文档插入，你需要先调用document.importNode方法。

示例

// 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部
var p = document.createElement("p");
document.body.appendChild(p);

规范(Specification)
DOM Standard# dom-node-appendchild

浏览器兼容性
在这里插入图片描述

append() 与 appendChild() 的区别

来源的区别

append()来自Element , appendChild()来字Node, Element是Node的子类

参数的区别

参数类型的区别

append()允许附加DOMString对象,比如append('hello')，
而.appendChild()只接受Node对象。

测试代码

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>append(str)与appendChild(str)测试</title></head><body>


<table>
	<thead></thead>
	<tbody>
		<tr>
			<td>
				<div id="div">
					<header>div</header>
					<section>line-1</section>
					<section>line-2</section>
					<section>line-3</section>
				</div>
			</td>
			<td>
				<div id="div2">
					<header>div2</header>
					<section>line-1</section>
					<section>line-2</section>
					<section>line-3</section>
				</div>
			</td>
		</tr>
	</tbody>
</table>

<script>
	let div  = document.getElementById("div");
	let div2 = document.getElementById("div2");
	
	div.append("append一个字符串");
	div.appendChild("appendChild一个字符串");
	
</script>

<style>
	table {
		border-collapse:collapse;
		width:600px; height:88vh;
		margin:100px 0 0 100px;
		font-size:33px;
	}
	
	div{
		border:1px solid black;
	}
</style>


</body></html>

在这里插入图片描述

参数个数的区别

append()可以追加多个节点和字符串，
appendChild()只能追加一个节点。

返回值的区别

append()没有返回值
appendChild()返回追加的child节点

kfepiza

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
element.append() node.appendChild() Element.prototype.append() Node.prototype.appendChild()

方法在元素的最后一个子元素之后插入一组Node对象或DOMString对象。DOMString对象作为等效Text节点插入。语法参数要插入的一组Node或DOMString对象。异常HierarchyRequestError：无法在层次结构中的指定点插入节点。示例附加元素追加文本追加元素和文本append方法是不可分的append()方法的作用域未限定在with语句中。有关详细信息，请参见Symbol.unscopables。规范文档浏览器兼容性参阅。
复制链接

扫一扫