​x
 
<!DOCTYPE html>
<html>
<body>
<h1>Element 对象</h1>
​
<h2>appendChild() 方法</h2>
​
<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>
​
<p>单击“追加”可将一个项目附加到列表的末尾：</p>
​
<button onclick="myFunction()">追加</button>
​
<script>
function myFunction() {
​
// 创建 "li" 节点：
const node = document.createElement("li");
​
// 创建文本节点：
const textnode = document.createTextNode("Water");
​
// 把文本节点附加到 "li" 节点：
node.appendChild(textnode);
​
// 把 "li" 节点附加到列表：
document.getElementById("myList").appendChild(node);
}
</script>
​
</body>
</html>
​
​