appendChild append insertBefore prepend

時間 2019-12-07

標籤 appendchild append insertbefore prepend 简体版

原文原文鏈接

CreateTime--2017年11月2日16:57:59javascript

Author:Marydonjava

appendChild()與append() insertBefore()與prepend()區別與聯繫jquery

描述：app

　　1.appendChild()是javascript在父節點最後面插入子節點的方法；dom

　　2.append()是jquery在父節點最後面插入子節點的方法；測試

　　3.insertBefore()在javascript中：在父節點最前面插入子節點，在jquery中：爲指定節點前面插入兄弟節點；spa

　　4.prepend()是jquery在父節點最前面插入子節點的方法。code

共性：對象

　　1.都是用來插入節點的，insertBefore在jquery的應用除外；blog

　　2.都是經過操做父節點來完成子節點的插入。

特性：

　　1.appendChild(tagElement)；

　　　　tagElement 只能是標籤dom對象

　　　　dom對象的獲取方式：方法一，經過js動態建立標籤元素（一般使用）；方法二，使用js從頁面獲取dom對象。

　　舉例：

　　HTML片斷

<body>
    <div id="test" style="display:none;"></div>
</body>

　　JAVASCRPT

//body標籤添加一個子節點
// 方式一
var divElement = document.createElement('div');
divElement.innerHTML = "經過js建立dom對象的方式實現";
document.body.appendChild(divElement);
// 方式二
divElement = $('#test').clone()[0];
divElement.id = '';
divElement.style.display = 'block';
divElement.innerHTML = "經過js+jquery從頁面獲取dom對象的方式實現";
document.body.appendChild(divElement);

　　2.append(param)

　　　　param能夠有三種表現形式：HTML片斷字符串、文本、經過js建立或獲取的dom對象　　

　　舉例：

//body標籤添加一個子節點
// 方式一
var divTagStr = '<div id="test">param爲HTML片斷字符串</div>'
$("body").append(divTagStr);
// 方式二
var textStr = "param爲文本";
$("body").append(textStr);
// 方式三
var divElement = document.createElement('div');
divElement.innerHTML = "param爲經過js建立的dom對象";
$("body").append(divElement);

　　3.insertBefore()

　　3.1 在javascript中的用法　　　　

　　　　parentElement.insertBefore(targetElement,positionElement);

　　　　targetElement：目標對象，將要插入的元素；

　　　　positionElement：插入位置對象，元素將被插入到該對象的前面。

　　　　注意：該方法必須經過父節點纔可以調用（只能經過父節點來完成對子節點的拼接）。

　　舉例：

　　　　HTML片斷

<body>
    <div><p id="duanluo">div中的段落標籤p</p></div>
</body>

　　　　JAVASCRIPT　　

window.onload = function(){        
    //id="test"的標籤添加一個子節點
    var divElement = document.createElement('div');
    // appendChild()
    divElement.innerHTML = "展現insertBefore()方法的用法";
    var brotherElement = document.getElementById("duanluo");
    brotherElement.parentNode.insertBefore(divElement,brotherElement);
}

　　3.2 在jquery中的用法

　　　　$(targetElement).insertBefore(positionElement);

　　　　targetElement：目標對象，將要插入的元素；

　　　　positionElement：插入位置對象，元素將被插入到該對象的前面

　　　　注意：該方法必須經過即將插入的對象進行調用

　　舉例：

window.onload = function(){
    var pElement = document.createElement('p');
    pElement.innerHTML = "指定節點前插入兄弟節點";
    $(pElement).insertBefore('#duanluo');
}

　　4.prepend(param)

　　　　param能夠有三種表現形式：HTML片斷字符串、文本、經過js建立或獲取的dom對象

情形一：

　　經過父節點添加子節點

　　1.在父節點最後面添加子節點；

　　HTML片斷

<body>
    <div id="test"><p>div中的段落標籤p</p></div>
</body>

　　JAVASCRIPT

window.onload = function(){        
    /* id="test"的標籤添加一個子節點 */
    // appendChild()
    var divElement = document.createElement('div');
    divElement.innerHTML = "使用js的appendChild()方法添加子節點";
    document.getElementById("test").appendChild(divElement);
    // append()
    var divTag = "<div>使用jquery的append()方法添加子節點</div>";
    $("#test").append(divTag);
}

　　2.在父節點最前面添加子節點。

　　HTML片斷

<div id="test"><p>測試insertBefore()</p><p>div中的段落標籤p</p></div>

　　JAVASCRIPT

window.onload = function(){        
    /* id="test"的標籤最前面添加一個子節點 */
    // insertBefore()
    var h1Element = document.createElement('h1');
    h1Element.innerHTML = "使用js的insertBefore()方法添加子節點";
    var parentElement = document.getElementById("test");
    var firstElement = parentElement.firstChild;
    parentElement.insertBefore(h1Element,firstElement);        
    // prepend()
    var h1Tag = "<h1>使用jquery的prepend()方法添加子節點</h1>";
    $("#test").prepend(h1Tag);
}

　　3.使用jquery實現的另外兩種方式

window.onload = function(){        
    /* 使用jquery的appendTo()添加子節點 */    
    var divTag = "<div>使用jquery的appendTo()方法添加子節點</div>";
    $(divTag).appendTo("#test");
    /* 使用jquery的prependTo()添加子節點 */
     var h1Tag = "<h1>使用jquery的prependTo()方法添加子節點</h1>";
    $(h1Tag).prependTo("#test");
}

　　3.1 append() prpend() appendTo() prpendTo()用法簡述

　　append()和prpend()都是經過選取肯定插入位置的對象來完成插入操做；

　　語法：$(positionElement).append(targetElement)和$(positionElement).prepend(targetElement);

　　appendTo()和prpendTo()都是經過選取將要插入的對象來指定插入操做。

　　語法：$(targetElement).appendTo(positionElement)和$(targetElement).prpendTo(positionElement)；

　　小結：

　　　　在父節點最後面添加子節點：

　　　　javascirpt使用appendChild()，jquery使用append()或appendTo()

　　　　在父節點最前面添加子節點

　　　　javascirpt使用insertBefore()，jquery使用prpend()或prpendTo()

情形二：　　

　　1.在指定子節點後面添加兄弟節點；

　　說明：javascript沒法實現，jquery能夠實現

　　jquery實現：調用insertAfter()或after()實現

<div id="test"><p id="duanluo">測試jquery指定節點後插入兄弟節點方法實現</p><p>div中的段落標籤p</p></div>

window.onload = function(){
    var pTag = '<p>指定節點後插入兄弟節點</p>';
    // 方法一
    $(pTag).insertAfter('#duanluo');
    // 方法二    
    $('#duanluo').after(pTag);
}

　　2.在指定子節點前面添加兄弟節點。

　　實現：

　　HTML片斷

<div id="test"><p>測試insertBefore()</p><p id="duanluo">div中的段落標籤p</p></div>

　　2.1 js實現：經過父節點添加兄弟節點（曲線救國）

window.onload = function(){        
    /* 指定位置添加一個兄弟節點 */
    // insertBefore()
    var pElement = document.createElement('p');
    pElement.innerHTML = "指定節點前插入兄弟節點";
    var parentElement = document.getElementById("test");
    var brotherElement = document.getElementById("duanluo");
    parentElement.insertBefore(pElement,brotherElement);
}

　　2.2 jquery實現：調用insertBefore()或before()方法實現

window.onload = function(){
    var pTag = '<p>指定節點前插入兄弟節點</p>';
    // 方法一
    $(pTag).insertBefore('#duanluo');
    // 方法二    
    $('#duanluo').before(pTag);
}

　　2.3 insertAfter() insertBefore() after() before()用法簡述

　　insertAfter()和insertBefore()都是經過選取將要插入的對象來指定插入操做；

　　語法：$(targetElement).insertAfter(positionElement)和$(targetElement).insertBefore(positionElement)；

　　after()和before()都是經過選取肯定插入位置的對象來完成插入操做。

　　語法：$(positionElement).after(targetElement)和$(positionElement).before(targetElement);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。