HTML - DOM replaceChild() 方法

HTML DOM 的replaceChild()方法允许您用另一个子元素（即新子元素）替换父元素中的一个子元素（即旧子元素）。

newChild 可以是任何类型的节点（元素、文本、注释等），而 oldChild 必须是 parentNode 的子元素。如果 oldChild 不是 parentNode 的子元素，则此方法将抛出 NotFoundError。

语法

以下是 HTML DOM replaceChild() 方法的语法：

parentElement.replaceChild(newChild, oldChild);

参数

此方法接受如下所述的两个参数：

参数	描述
newChild	将替换现有（旧）子元素的新子元素。
oldChild	将被替换的现有子元素。

返回值

此方法返回已从父元素中删除的被替换的子元素。

示例 1：用新元素替换段落

以下示例演示了 HTML DOM replaceChild() 方法的使用方法，该方法在单击按钮时使用新内容替换段落（<p>）：

<![DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM replaceChild()</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>Click the button to replace the paragraph with a new div.</p>
<div id="content">
<p id="currentPara">This is a paragraph.</p>
</div>
<button onclick="replaceParagraph()">Replace Paragraph</button>
<script>
   function replaceParagraph() {
      const newDiv = document.createElement('div');
      newDiv.textContent = 'This is a new div element';
      const content = document.getElementById('content');
      const currentPara = document.getElementById('currentPara');
      content.replaceChild(newDiv, currentPara);
   }
</script>
</body>
</html>

示例 2：替换列表项

以下是 HTML DOM replaceChild() 方法的另一个示例。我们使用此方法用新的列表项替换列表 (<li>) 项：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM replaceChild()</title>
<style>
   button{
      padding: 10px;
   }
</style>
</head>
<body>
<p>Click the button to replace the first list item with a new list item.</p>
<ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<button onclick="replaceListItem()">Replace List Item</button>
<script>
   function replaceListItem() { 
       const nI=document.createElement('li');
       nI.textContent = 'New Item';
       // Get reference to the list and the first list item
       const mL=document.getElementById('myList');
       const fi=mL.querySelector('li:first-child');
       // Replace the first list item with the new list item
       mL.replaceChild(nI, fi);
   }
</script>
</body>
</html>

支持的浏览器

方法
replaceChild()	是	是	是	是	是

html_dom_element_reference.htm

打印页面