js给元素追加html代码,js中常用追加元素的几种方法，熟练使用这几种方法，方便动态更改DOM结构...

js中常用追加元素的几种方法

.container {

width: 1200px;

padding: 10px;

margin: 50px auto;

border: 1px solid lightcoral;

}

#wrap{

border: 1px solid lightseagreen;

}

.container p{

height: 30px;

line-height: 30px;

}

.btn-group{

margin-top: 20px;

}

button{

width: 80px;

height: 32px;

margin-right: 10px;

line-height: 32px;

text-align: center;

border: 0px;

}

我是第一个子元素

我是第二个子元素

append

appendTo

prepend

prependTo

after

before

appendChild

insertAfter

insertBefore

$(function(){

//append(),在父级最后追加一个子元素

$(".append").click(function(){

$("#wrap").append("

我是子元素append

");

});

//appendTo(),将子元素追加到父级的最后

$(".appendTo").click(function(){

$("

我是子元素appendTo

").appendTo($("#wrap"));

});

//prepend(),在父级最前面追加一个子元素

$(".prepend").click(function(){

$("#wrap").prepend("

我是子元素prepend

");

});

//prependTo(),将子元素追加到父级的最前面

$(".prependTo").click(function(){

$("

我是子元素prependTo

").prependTo($("#wrap"));

});

//after(),在当前元素之后追加(是同级关系)

$(".after").click(function(){

$("#wrap").after("

我是同级元素after

");

});

//before(),在当前元素之前追加(是同级关系)

$(".before").click(function(){

$("#wrap").before("

我是同级元素before

");

});

//insertAfter(),将元素追加到指定对象的后面(是同级关系)

$(".insertAfter").click(function(){

$("

我是同级元素insertAfter

").insertAfter($("#wrap"));

});

//insertBefore(),将元素追加到指定对象的前面(是同级关系)

$(".insertBefore").click(function(){

$("

我是同级元素insertBefore

").insertBefore($("#wrap"));

});

});

//appendChild(),在节点的最后追加子元素

function appChild(){

// 创建p节点

var para=document.createElement("p");

// 创建文本节点

var node=document.createTextNode("我是子集appendChild新段落。");

// 把文本节点添加到p节点里

para.appendChild(node);

// 查找div1

var element=document.getElementById("wrap");

// 把p节点添加到div1里

element.appendChild(para);

}