在前端開發中常常需要使用JavaScript,那你知道如何用JS加入子節點嗎?這篇文章就跟大家講講JS創建節點和添加節點的方法,有興趣的朋友可以參考一下,希望可以幫助你。
要為HTML DOM 新增一個新的元素,我們首先要建立該節點(即該元素),並建立完成以後再將其新增至需要新增的位置。
新增節點的關鍵是使用appendChild() 方法,它可以在子節點的最後新增新的子節點。
範例:清單中顯示了古代四大美女中的三位,點擊新增按鈕將王昭君作為最後一個節點加入清單。
步驟詳解
第一步,用createElement建立一個新的
第二步,因為
第三步,用appendChild將文字節點加入
第四步,將建立好的節點加入指定位置
var element= document.getElementById("myList")找到一個已有的元素
element.appendChild(node)向已有的元素追加新元素
##完整程式碼如下
HTML部分:<body> <ul id="myList"> <li>杨玉环</li> <li>西施</li> <li>貂蝉</li> </ul> <p>单击按钮将项目添加到列表中</p> <button onclick="myFunction()">点击添加</button> </body>JavaScript部分:
<script type="text/javascript"> function myFunction(){ var node=document.createElement("li"); var textnode=document.createTextNode("王昭君"); node.appendChild(textnode); document.getElementById("myList").appendChild(node); } </script>效果圖: 第一個圖是未加入節點的效果,第二張圖是點選新增節點後的效果,將王昭君加入HTML中了。 以上介紹了JS創建節點和添加節點的方法,比較詳細,容易理解,初學者可以自己動手嘗試,希望這篇文章對你有幫助!更多相關教學請造訪
以上是圖文詳解JS中如何建立節點與新增節點的詳細內容。更多資訊請關注PHP中文網其他相關文章!