appendChild append insertBefore prepend

原创

Marydon 2023-03-01 16:52:25 ©著作权

文章标签 JS 子节点 jquery 父节点 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者Marydon的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

Author:Marydon

appendChild()与append() insertBefore()与prepend()区别与联系

描述：

appendChild()是javascript在父节点最后面插入子节点的方法；

append()是jquery在父节点最后面插入子节点的方法；

insertBefore()在javascript中：在父节点最前面插入子节点，在jquery中：为指定节点前面插入兄弟节点；

prepend()是jquery在父节点最前面插入子节点的方法。

共性：

都是用来插入节点的，insertBefore在jquery的应用除外；

都是通过操作父节点来完成子节点的插入。

特性：

　　1.appendChild(tagElement)；

tagElement 只能是标签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)

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);

目标对象，将要插入的元素；

插入位置对象，元素将被插入到该对象的前面。

该方法必须通过父节点才能够调用（只能通过父节点来完成对子节点的拼接）。

　　举例：

　　　　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);

目标对象，将要插入的元素；

插入位置对象，元素将被插入到该对象的前面

该方法必须通过即将插入的对象进行调用

　　举例：

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

　　4.prepend(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可以实现

调用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);

</div

作者：Marydon