使用JavaScript在html檔案內新增新的元素節點

2022-02-25 10:00:03

一、基本語法與解釋

1.在某元素附近建立一個新的元素節點

 // 將節點插入指定標籤之後
 // 建立一個p標籤物件
 var para = document.createElement("p");
 // 建立文字物件
 var node = document.createTextNode("這是一個新的段落。");
 // 將文字物件加入p標籤物件
 para.appendChild(node);
 // 選出id=div1的標籤
 var element = document.getElementById("div1");
 // 在該標籤之後加上剛建立的p標籤
 element.appendChild(para);
 // 將節點插到指定標籤之前
 var para = document.createElement("p");
 var node = document.createTextNode("這是一個新的段落。");
 para.appendChild(node);
 var element = document.getElementById("div1");
 var child = document.getElementById("p1");
 element.insertBefore(para, child);

2.刪除標籤

// 刪除存在的標籤
 // 以下程式碼是已知要查詢的子元素，然後查詢其父元素，再刪除這個子元素
 //（刪除節點必須知道父節點）：
 var parent = document.getElementById("div1");
 var child = document.getElementById("p1");
 parent.removeChild(child);

3.修改標籤

// 替換標籤
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
//將內容新增進標籤
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
//將parent中的para標籤替換為child
parent.replaceChild(para, child);

4.使用選擇器選出某一類標籤

// 選出所有同一型別的標籤 獲取HTMLCollection 物件。
    function myFunction() {
        // getElementsByTagName() 方法返回所有同一型別的標籤
        var myCollection = document.getElementsByTagName("p");
        var i;
        for (i = 0; i < myCollection.length; i++) {
            // 對標籤的屬性進行修改
            myCollection[i].style.color = "red";
        }
    }

二、實際應用

1.完整程式碼

程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教學(runoob.com)</title>
</head>
    <body>
        <div id="div1">
        <p id="p1">這是一個段落。</p>
        <p id="p2">這是另外一個段落。</p>
        </div>
    
    <script>
        // 將節點插入指定標籤之後
        // 建立一個p標籤物件
        var para = document.createElement("p");
        // 建立文字物件
        var node = document.createTextNode("這是一個新的段落。");
        // 將文字物件加入p標籤物件
        para.appendChild(node);
        // 選出id=div1的標籤
        var element = document.getElementById("div1");
        // 在該標籤之後加上剛建立的p標籤
        element.appendChild(para);
        // 將節點插到指定標籤之前
        var para = document.createElement("p");
        var node = document.createTextNode("這是一個新的段落。");
        para.appendChild(node);
        var element = document.getElementById("div1");
        var child = document.getElementById("p1");
        element.insertBefore(para, child);
        // 刪除存在的標籤
        // 以下程式碼是已知要查詢的子元素，然後查詢其父元素，再
        刪除這個子元素（刪除節點必須知道父節點）：
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.removeChild(child);
        // 替換標籤
        var para = document.createElement("p");
        var node = document.createTextNode("這是一個新的段落。");
        para.appendChild(node);
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.replaceChild(para, child);
        // 選出所有同一型別的標籤 獲取HTMLCollection 物件。
        function myFunction() {
            // getElementsByTagName() 方法返回所有同一型別的標籤
            var myCollection = document.getElementsByTagName("p");
            var i;
            for (i = 0; i < myCollection.length; i++) {
                // 對標籤的屬性進行修改
                myCollection[i].style.color = "red";
            }
        }
    </script>
    </body>
</html>

2.執行效果

三、注意事項

使用選擇器選出某一類標籤獲取HTMLCollection 物件時
HTMLCollection 不是一個陣列！
HTMLCollection 看起來可能是一個陣列，但其實不是。
我們可以像陣列一樣，使用索引來獲取元素。

HTMLCollection 無法使用陣列的方法： valueOf(), pop(), push(), 或 join()
第二種篩選方法 NodeList
所有瀏覽器的 childNodes 屬性返回的是 NodeList 物件。
大部分瀏覽器的 querySelectorAll() 返回 NodeList 物件。