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

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

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

在前端開發中常常需要使用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中如何建立節點與新增節點圖文詳解JS中如何建立節點與新增節點

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

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

    JavaScript影片教學

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

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