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节点