HTML DOM 07 建立節點
阿新 • • 發佈：2020-07-26
示例1:
建立元素節點
通過createElement建立一個新的元素節點
接著把該元素節點，通過appendChild加入到另一個元素節點div1中
<html> <div id="d">Hello HTML DOM</div> <script> function add(){ var hr=document.createElement("hr"); var div1 = document.getElementById("d"); div1.appendChild(hr); } </script> <buttononclick="add()">在div中追加一個hr元素</button> </html>
示例2:
建立文字節點
首先建立一個元素節點p (p是p標籤，不是隨便命名的變數名)
接著通過createTextNode建立一個內容節點text
把text加入到p
再把p加入到div
<html> <div id="d">Hello HTML DOM</div> <script> function add(){ var p=document.createElement("p"); var text = document.createTextNode("這是通過DOM創建出來的<p>"); p.appendChild(text); var div1 = document.getElementById("d"); div1.appendChild(p); } </script> <button onclick="add()">在div中追加一個p元素</button> </html>
示例3:
建立屬性節點
首先建立一個元素節點a
接著建立一個內容節點content
把content加入到a
然後通過createAttribute建立一個屬性節點href
設定href的值為http:12306.com 通過setAttributeNode把該屬性設定到元素節點a上
最後把a加入到div
<html> <div id="d">Hello HTML DOM<br></div> <script> function add(){ var a=document.createElement("a"); var content = document.createTextNode("http://12306.com"); a.appendChild(content); var href = document.createAttribute("href"); href.nodeValue="http://12306.com"; a.setAttributeNode(href); var div1 = document.getElementById("d"); div1.appendChild(a); } </script> <button onclick="add()">在div中追加一個超鏈</button> </html>