標籤：ntb creat 列表 last ext 注釋 oct 點擊 pen
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() 方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
