首頁 > 文章 > web前端 > 圖文詳解JS中如何建立節點與新增節點

圖文詳解JS中如何建立節點與新增節點

yulia原創: 2018-10-09 10:18:3320554瀏覽

在前端開發中常常需要使用JavaScript，那你知道如何用JS加入子節點嗎？這篇文章就跟大家講講JS創建節點和添加節點的方法，有興趣的朋友可以參考一下，希望可以幫助你。

要為HTML DOM 新增一個新的元素，我們首先要建立該節點（即該元素），並建立完成以後再將其新增至需要新增的位置。

新增節點的關鍵是使用appendChild() 方法，它可以在子節點的最後新增新的子節點。

範例：清單中顯示了古代四大美女中的三位，點擊新增按鈕將王昭君作為最後一個節點加入清單。

步驟詳解

第一步，用createElement建立一個新的

元素
var node=document.createElement("li")

第二步，因為

元素裡面有內容，所以也要用createTextNode建立一個文字節點
var textnode=document.createTextNode("王昭君")

第三步，用appendChild將文字節點加入

元素中
node.appendChild(textnode)

第四步，將建立好的節點加入指定位置
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>

效果圖：

圖文詳解JS中如何建立節點與新增節點

第一個圖是未加入節點的效果，第二張圖是點選新增節點後的效果，將王昭君加入HTML中了。

以上介紹了JS創建節點和添加節點的方法，比較詳細，容易理解，初學者可以自己動手嘗試，希望這篇文章對你有幫助！更多相關教學請造訪

JavaScript影片教學

以上是圖文詳解JS中如何建立節點與新增節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js怎麼修改html元素的內容？ HTML DOM實作修改內容下一篇：js怎麼修改html元素的內容？ HTML DOM實作修改內容

看更多