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

打印页面