js中常⽤追加元素的⽅法总结js中常⽤追加元素的⽅法总结
⽅法介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中常⽤追加元素的⼏种⽅法</title>
<link rel="stylesheet" href="css/rest.css"/>
<script src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.container{
width: 1200px;
padding: 10px;
margin: 50px auto;
border: 1px solid lightcoral;
}
jquery在一个元素后追加标签
#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;
}
</style>
</head>
<body>
<div class="container">
<div id="wrap">
<p class="first">我是第⼀个⼦元素</p>
<p class="second">我是第⼆个⼦元素</p>
</div>
<div class="btn-group">
<button class="append">append</button>
<button class="appendTo">appendTo</button>
<button class="prepend">prepend</button>
<button class="prependTo">prependTo</button>
<button class="after">after</button>
<button class="before">before</button>
<button class="appendChild"οnclick="appChild()">appendChild</button>
<button class="insertAfter">insertAfter</button>
<button class="insertBefore">insertBefore</button>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
//append()，在⽗级最后追加⼀个⼦元素
//append()，在⽗级最后追加⼀个⼦元素
$(".append").click(function(){
$("#wrap").append("<p class='three'>我是⼦元素append</p>");});
//appendTo()，将⼦元素追加到⽗级的最后
$(".appendTo").click(function(){
$("<p class='three'>我是⼦元素appendTo</p>").appendTo($("#wrap"));});
/
/prepend()，在⽗级最前⾯追加⼀个⼦元素
$(".prepend").click(function(){
$("#wrap").prepend("<p class='three'>我是⼦元素prepend</p>");});
//prependTo()，将⼦元素追加到⽗级的最前⾯
$(".prependTo").click(function(){
$("<p class='three'>我是⼦元素prependTo</p>").prependTo($("#wrap"));});
//after()，在当前元素之后追加（是同级关系）
$(".after").click(function(){
$("#wrap").after("<p class='siblings'>我是同级元素after</p>");});
//before()，在当前元素之前追加（是同级关系）
$(".before").click(function(){
$("#wrap").before("<p class='siblings'>我是同级元素before</p>");});
//insertAfter()，将元素追加到指定对象的后⾯（是同级关系）
$(".insertAfter").click(function(){
$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));});
//insertBefore()，将元素追加到指定对象的前⾯（是同级关系）
$(".insertBefore").click(function(){
$("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));}); });
//appendChild()，在节点的最后追加⼦元素
function appChild(){
// 创建p节点
var ateElement("p");
/
/ 创建⽂本节点
var ateTextNode("我是⼦集appendChild新段落。");
// 把⽂本节点添加到p节点⾥
para.appendChild(node);
// 查div1
var ElementById("wrap");
// 把p节点添加到div1⾥
element.appendChild(para);
}
</script>
点击按钮后的效果图
简单总结
append()，在⽗级最后追加⼀个⼦元素
appendTo()，将⼦元素追加到⽗级的最后
prepend()，在⽗级最前⾯追加⼀个⼦元素
prependTo()，将⼦元素追加到⽗级的最前⾯
after()，在当前元素之后追加（是同级关系）
before()，在当前元素之前追加（是同级关系）
insertAfter()，将元素追加到指定对象的后⾯（是同级关系）insertBefore()，将元素追加到指定对象的前⾯（是同级关系）appendChild()，在节点的最后追加⼦元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。