Javascript：DOM 節點（建立HTML元素/刪除HTML元素），javascriptdom
使用DOM可以建立HTML元素，也可以刪除已有的HTML元素。
代碼整理自w3school：http://www.w3school.com.cn
（一）建立元素：
<script> //建立新的 <p> 元素 var newEle=document.createElement("p"); //建立文本節點 var node=document.createTextNode("這是使用Javascript建立的新段落。"); //將文本節點添加到新建立的 <p> 元素中 newEle.appendChild(node); var div1_ele=document.getElementById("div1"); //將新建立的元素添加到已有的元素中 div1_ele.appendChild(newEle); </script>（二）刪除HTML元素
<script> //刪除一個元素時，必須首先擷取到它的父元素 function deleteEle(){ var parent = document.getElementById("div_02"); var child = document.getElementById("div_02_p2"); parent.removeChild(child); } //使用代碼擷取元素的父元素 function deleteEle3(){ var child = document.getElementById("div_02_p3"); child.parentNode.removeChild(child); } </script>：
範例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>Javascript 節點</title><head> <style> body {background-color:#e6e6e6} </style></head><body> <h3>（一）添加元素</h3> <div id="div1"> <p id="p1">這是一個段落</p> <p id="p2">這是另一個段落</p> </div> <script> //建立新的 <p> 元素 var newEle=document.createElement("p"); //建立文本節點 var node=document.createTextNode("這是使用Javascript建立的新段落。"); //將文本節點添加到新建立的 <p> 元素中 newEle.appendChild(node); var div1_ele=document.getElementById("div1"); //將新建立的元素添加到已有的元素中 div1_ele.appendChild(newEle); </script> <h3>（二）刪除元素</h3> <div id="div_02"> <p id="div_02_p1">這是一個段落</p> <p id="div_02_p2">這是另一個段落</p> <button onclick="deleteEle()">刪除id為‘div_02_p2’的元素</button><br/> <p id="div_02_p3">這是第三個段落</p> <button onclick="deleteEle3()">刪除id為‘div_02_p3’的元素（自動擷取父元素）</button> <script> //刪除一個元素時，必須首先擷取到它的父元素 function deleteEle(){ var parent = document.getElementById("div_02"); var child = document.getElementById("div_02_p2"); parent.removeChild(child); } //使用代碼擷取元素的父元素 function deleteEle3(){ var child = document.getElementById("div_02_p3"); child.parentNode.removeChild(child); } </script> </div></body></html>
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
