appendChild append insertBefore prepend

Posted 2020-10-15 Marydon

 

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

Author:Marydon

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

c.在父元素最后插入一个子节点
　　javascript方式

　　　　appendChild("这里只能是标签元素")，

　　　　如：appendChild(‘div‘)，想要指定标签样式及标签体内的内容，需像最上面那样，先动态创建一个元素并指定属性，再拼接

　　举例：

//body标签添加一个子节点
document.body.appendChild(divTag);

　　jQuery方式

　　　　append("可以直接拼接html片段或文本内容")
　　举例：

//方法一
$("body").append(divTag);
//方法二
$("body").append("<div id=‘test‘></div>")　　

　　d.在父元素最前面插入一个子节点
　　在指定的同级元素前面插入兄弟节点
　　javascript方式　　　

　　　　insertBefore(目标对象，插入位置)
　　　　该方法只能通过父节点来完成对子节点的拼接

　　举例：

//在a标签前面插入一个兄弟节点
var aTag = document.getElementById("test");
document.body.insertBefore(divTag,aTag);

　　jQuery方式　　

　　　　prepend("可以直接拼接HTML片段或文本内容")
　　举例：

$("#test").prepend(divTag);

 

 </div