在前幾篇的博文中,我們說了利用appendChild方法可以在DOM文檔流中指定的元素后追加利用createElement方法和createTextNode方法創建的新元素,但是appendChild追加的元素都是子元素,不可以現實我們需要下面說的在指定元素前或后插入新元素的方案。

insertBefore()方法

insertBefore()方法,可以實現把一個新元素插入到現在元素的前面,與現有元素形成兄弟關系。

前提條件

1、新元素,你想插入的新元素(newElement)

国产视频app2、目標元素,你想把新元素插入到哪個元素的前面(targetELement)

3、父元素,目標元素的父元素(parentElement)

語法:

parentElement.insertBefore(newElement,targetElement);

注:

国产视频app1、我們沒有必要搞清楚或獲取目標元素的父元素是誰,因為目標元素(targetElement)的父元素就是它本身的parentNode屬性。

2、在DOM一個元素的父元素必須是另一個元素節點,屬性節點或文本節點的子元素不允許是元素節點

例:

insertBefore()方法

1、我們新建一個P標簽元素

国产视频app2、然后新建一個“你好,墨初”的文本節點

3、將這兩個節點都插入到ID為mochu的元素的前面

HTML代碼:

<!DOCTYPE html>
    <head>
    </head>
    <body>
        <div id=“mochu”>
        ........
        </div>
    </body>
</html>

JavaScript代碼

window.onload = function(){
    var para = document.createElement("p");//新建標簽元素
    var txt = document.createTextNode("你好,墨初");//文本元素
    var mochu = getElementById("mochu");//獲取指定元素
    para.appendChild(txt);//元素追加
    mochu.parentNode.insertBefore(para,mochu);
}

現在我們知道如何在一個目標元素前面加入新元素了,那在目標后面如何加入新元素呢?

insertAfter()自定義函數

javascript沒有給我們提供,在目標元素后面加入新元素的函數,但是我們這里可以自己寫

命名函數為 insertAfter

QQ截圖20180111213615.png

代碼:

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

通邊上面的代碼,我們新建了一個可以在指定元素后面追加元素的函數insertAfter(),當然上面的示例我們也可以這樣修改!

例:

JS在目標元素后追加新元素

1、我們新建一個P標簽元素

2、然后新建一個“你好,墨初”的文本節點

3、將這兩個節點都插入ID為mochu元素的后面

HTML代碼:

<!DOCTYPE html>
    <head>
    </head>
    <body>
        <div id=“mochu”>
        ........
        </div>
    </body>
</html>

国产视频appJavaScript代碼

window.onload = function(){
    var para = document.createElement("p");//新建標簽元素
    var txt = document.createTextNode("你好,墨初");//文本元素
    var mochu = getElementById("mochu");//獲取指定元素
    para.appendChild(txt);//元素追加
    insertAfter(para,mochu);
}

国产视频app說明一下:insertAfter()函數為自定義的函數,并不是Javascript自帶的函數。不能直接調用,一定要先創建再調用!