​x
 
<!DOCTYPE html>
<html>
<body>
​
<h1>Element 对象</h1>
​
<h2>replaceChild() 方法</h2>
​
<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
​
<p>单击“替换”按钮可替换列表中的第一项。</p>
​
<button onclick="myFunction()">替换</button>
​
<p>此例将文本节点“Coffee”替换为文本节点“Water”。替换整个 li 元素也是一种替代方法。</p>
​
<script>
function myFunction() {
// 选取第一个子元素：
const element = document.getElementById("myList").children[0];
​
// 创建新的文本节点：
const newNode = document.createTextNode("Water");
​
// 替换文本节点：
element.replaceChild(newNode, element.childNodes[0]);
}
</script>
​
</body>
</html>
​