CreateTime--2017年11月2日16:57:59
Author:Marydon
appendChild()与append() insertBefore()与prepend()区别与联系
描述：
1.appendChild()是javascript在父节点最后面插入子节点的方法；
2.append()是jquery在父节点最后面插入子节点的方法；
3.insertBefore()在javascript中：在父节点最前面插入子节点，在jquery中：为指定节点前面插入兄弟节点；
4.prepend()是jquery在父节点最前面插入子节点的方法。
共性：
1.都是用来插入节点的，insertBefore在jquery的应用除外；
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);