Node: appendChild() 方法
Node 介面的 appendChild() 方法將一個節點新增到指定父節點子節點列表的末尾。
注意： 如果提供的子節點是文件中現有節點的引用，appendChild() 會將其從當前位置移動到新位置。
如果提供的子節點是 DocumentFragment，則 DocumentFragment 的所有內容都會被移動到指定父節點的子節點列表中。
appendChild() 返回新附加的節點，如果子節點是 DocumentFragment，則返回被清空的片段。
注意： 與此方法不同，Element.append() 方法支援多個引數和附加字串。如果你的節點是元素，可以優先使用它。
語法
appendChild(child)
引數
child-
要附加到給定父節點（通常是元素）的節點。
返回值
一個 Node，它是被附加的子節點（child），除非 child 是一個 DocumentFragment，在這種情況下，返回空的 DocumentFragment。
異常
HierarchyRequestErrorDOMException-
當違反 DOM 樹的約束時丟擲，即發生以下任一情況時：
- 如果
child的父節點不是Document、DocumentFragment或Element。 - 如果插入
child會導致迴圈，即child是該節點的祖先。 - 如果
child不是DocumentFragment、DocumentType、Element或CharacterData。 - 如果當前節點是
Text並且其父節點是Document。 - 如果當前節點是
DocumentType並且其父節點*不是*Document，因為文件型別應該始終是文件的直接後代。 - 如果節點的父節點是
Document且child是一個包含多個Element子節點，或者包含Text子節點的DocumentFragment。 - 如果插入
child會導致Document擁有多個Element作為子節點。
- 如果
描述
如果提供的子節點是文件中現有節點的引用，appendChild() 會將其從當前位置移動到新位置——在將其附加到另一個節點之前，不需要將其從其父節點中刪除。這意味著一個節點不能同時存在於文件的兩個位置。可以使用 Node.cloneNode() 方法在將節點附加到新父節點之前複製該節點。使用 cloneNode 建立的副本不會自動保持同步。
appendChild() 返回新附加的節點，而不是父節點。這意味著你可以在建立新節點後立即附加它，而不會丟失對它的引用。
const paragraph = document.body.appendChild(document.createElement("p"));
// You can append more elements to the paragraph later
另一方面，你不能以 鏈式呼叫 API 的方式（例如 jQuery）使用 appendChild()。
// This doesn't append three paragraphs:
// the three elements will be nested instead of siblings
document.body
.appendChild(document.createElement("p"))
.appendChild(document.createElement("p"))
.appendChild(document.createElement("p"));
示例
向 body 追加一個段落
// Create a new paragraph element, and append it to the end of the document body
const p = document.createElement("p");
document.body.appendChild(p);
建立巢狀的 DOM 結構
在此示例中，我們嘗試使用盡可能少的臨時變數來建立巢狀的 DOM 結構。
const fragment = document.createDocumentFragment();
const li = fragment
.appendChild(document.createElement("section"))
.appendChild(document.createElement("ul"))
.appendChild(document.createElement("li"));
li.textContent = "hello world";
document.body.appendChild(fragment);
它生成以下 DOM 樹：
<section>
<ul>
<li>hello world</li>
</ul>
</section>
規範
| 規範 |
|---|
| DOM # dom-node-appendchild |
瀏覽器相容性
載入中…