HTML DOM appendChild() 方法
1.
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">請點擊按鈕向列表中添加項目。</p>
<button onclick="myFunction()">親自試一試</button>
<script>
function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
//此時node為<li>Water</li>
//(不知為何 appendChild方法能將文本append到標簽裏)
document.getElementById("myList").appendChild(node);
}
</script>
<p><b>註釋：</b>首先創建 LI 節點，然後創建文本節點，然後把這個文本節點追加到 LI 節點。最後把 LI 節點添加到列表中。</p>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<body>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="demo2">demo2</p>
<p id="demo">請點擊按鈕把項目從一個列表移動到另一個列表中。</p>
<button onclick="myFunction()">親自試一試</button>
<script>
function myFunction()
{
var node=document.getElementById("myList2").lastChild;
//這裏倒像是把 <li>Milk</li> 剪切出來了
console.log(node);
document.getElementById("demo2").appendChild(node);
//然後再追加到這裏
}
</script>
</body>
</html>
---------------------------------------------以上來源於W3School "HTML DOM appendChild() 方法" 一節
HTML DOM appendChild() 方法