HTML - DOM appendChild() 方法

HTML DOM 的appendChild()方法用於將新的子節點（元素）作為最後一個子節點新增到指定的父節點中。

此方法返回附加的子節點。如果節點已存在於文件中，則在將其附加到新父節點之前，先將其從當前父節點中移除。

一次只能附加一個子節點。要附加多個節點，需要多次呼叫此方法。

語法

以下是 HTML DOM appendChild()方法的語法：

element.appendChild(newNode);

引數

此方法接受如下所示的單個引數：

引數	描述
newNode	它表示將新增到父元素的新子節點。

返回值

此方法返回已新增到父元素的附加子節點。如果附加操作期間發生錯誤，則返回“null”。

示例 1：巢狀追加到文件

下面的示例幫助您瞭解巢狀追加是如何工作的，方法是在一個<div>中新增一個段落，然後將該 div 追加到文件中：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM appendChild()</title>
<style>
   #outer-before, #outer-after {
       width: 300px;
       padding: 10px;
       border: 1px solid #666;
   }
</style>
</head>
<body>
<h2>Before</h2>
<div id="outer-before">
<div id="inner-before"></div>
</div>
<h2>Appended with new paragraph content</h2>
<div id="outer-after">
<div id="inner-after">
<p>New paragraph added to the inner div.</p>
</div>
</div>
<script>    
   var outer = document.getElementById('outer-after');
   var inner = document.getElementById('inner-after');
   outer.appendChild(inner);
</script>
</body>
</html>

示例 2：動態新增段落

以下是 HTML DOM appendChild()方法的另一個示例，它顯示瞭如何動態地將段落新增到網頁中：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM appendChild()</title>
</head>
<body>
<p>Adding Paragraph dynamically</p>
<p>click on button to see the added paragraph content...</p>
<button onclick="addParagraph()">Add Paragraph</button>
<div id="paragraph-container">
</div>    
<script>
   function addParagraph() {
      var paragraph = document.createElement('p');
      paragraph.textContent = 'This is a dynamically added paragraph.';
      document.getElementById('paragraph-container').appendChild(paragraph);
   }
</script>
</body>
</html>

示例 3：建立簡單的列表

此示例演示瞭如何動態（執行時）建立一個簡單的列表。單擊“新增列表”按鈕時，新的列表（即 li 元素）將新增到無序列表 (ul)中：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM appendChild()</title>
</head>
<body>
<p>Creates a List</p>
<p>click on the button to append more list items....</p>
<button onclick="addListItem()">Add List Item</button>
<ul id="list-container"></ul>    
<script>
    function addListItem() {
       var listItem = document.createElement('li');
       listItem.textContent = 'List item';
       document.getElementById('list-container').appendChild(listItem);
    }
</script>
</body>
</html>

示例 4：動態插入影像

在下面的示例中，我們使用appendChild()方法動態地將影像追加到網頁中：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM appendChild()</title>
</head>
<body>
<p>Inserts an Image Dynamically</p>
<p>Clicking the button appends more images...</p>
<button onclick="addImage()">Add Image</button>
<div id="image-container">
</div>
<script>
   function addImage() {
      var image = document.createElement('img');
      image.src = '/html/images/logo.png';
      image.alt = 'Placeholder Image';
      document.getElementById('image-container').appendChild(image);
   }
</script>
</body>
</html>

示例 5：新增文字節點

此示例演示瞭如何使用 HTML DOM appendChild()方法將文字節點新增到現有的 HTML 元素中：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM appendChild()</title>
</head>
<body>
<p>Appending Text Nodes</p>
<h2>Before Appending Text Node:</h2>
<div id="container-after">
</div>
<h2>After Appending Text Node:</h2>
<div id="container">This is some initial content.</div>

<script>
   var container = document.getElementById('container');
   var containerAfter = document.getElementById('container-after'); 
   var textNode = document.createTextNode(' This is a text node.'); 
   container.appendChild(textNode); 
   containerAfter.innerHTML = ''; 
   containerAfter.appendChild(textNode.cloneNode(true));
</script>
</body>
</html>

支援的瀏覽器

方法
appendChild()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面