首頁 > 開發者 > JavaScript
JavaScript DOM節點操作執行個體小結(建立,刪除HTML元素)，javascriptdom
本文執行個體講述了JavaScript DOM節點操作方法。分享給大家供大家參考，具體如下：
使用DOM可以建立HTML元素，也可以刪除已有的HTML元素。
（一）建立元素：
<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
