JQuery实现动态插入HTML模块
在项目中经常会遇到需要动态生成某个模块并将其插入到原有的HTML页面中,那么我就将我所知道的方法总结如下:
选择器选择的都是父级,添加到父级里
append:$("#wrap").append(“
啦啦啦
“); 添加到父级中所有子元素的最前面
appendto: ( " < p > 啦 啦 啦 < / p > " ) . a p p e n d T o ( ("<p>啦啦啦 </p>").appendTo( ("<p>啦啦啦</p>").appendTo((”#wrap”)); 添加到父级中所有子元素的最前面
prepend: $("#wrap").prepend(“
啦啦啦
“); 添加到父级中所有子元素的最前面
prependto: ( " < p > 啦 啦 啦 < / p > " ) . p r e p e n d T o ( ("<p>啦啦啦 </p>").prependTo( ("<p>啦啦啦</p>").prependTo((”#wrap”)); 添加到父级中所有子元素的最前面
添加到与父级同级
after: $("#wrap").after(“
啦啦啦
“); 添加到当前选择的父级元素前面
insertafter: ( " < p > 啦 啦 啦 < / p > " ) . i n s e r t A f t e r ( ("<p>啦啦啦 </p>").insertAfter( ("<p>啦啦啦</p>").insertAfter((”#wrap”)); 添加到当前选择的父级元素前面
before: $("#wrap").before(“
啦啦啦
“); 添加到当前选择的父级元素后面
insertbefore: ( " < p > 啦 啦 啦 < / p > " ) . i n s e r t B e f o r e ( ("<p>啦啦啦 </p>").insertBefore( ("<p>啦啦啦</p>").insertBefore((”#wrap”)); 添加到当前选择的父级元素后面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中常用追加元素的几种方法</title>
<!--<link rel="stylesheet" href="css/rest.css" />-->
<style>
.container {
width: 1200px;
padding: 10px;
margin: 50px auto;
border: 1px solid lightcoral;
}
#wrap{
border: 1px solid lightseagreen;
margin-top: 20px;
margin-bottom: 20px;
}
.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;
}
.test{
width: 300px;
height: 200px;
border: 1px salmon solid;
}
</style>
</head>
<body>
<div class="container">
<div class="test">
</div>
<div id="wrap">
<p class="first">我是第一个子元素</p>
<p class="second">我是第二个子元素</p>
</div>
<div class="test">
</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="insertAfter">insertAfter</button>
<button class="before">before</button>
<button class="insertBefore">insertBefore</button>
</div>
</div>
</body>
</html>
<script src="../js/jquery-3.2.1.js"></script>
<script>
var i = 0;
$(function(){
//append(),在父级最后追加一个子元素
$(".append").click(function(){
$("#wrap").append("<p class='three'>我是子元素append"+i+"</p>");
i++;
});
//appendTo(),将子元素追加到父级的最后
$(".appendTo").click(function(){
$("<p class='three'>我是子元素appendTo"+i+"</p>").appendTo($("#wrap"));
i++;
});
//prepend(),在父级最前面追加一个子元素
$(".prepend").click(function(){
$("#wrap").prepend("<p class='three'>我是子元素prepend"+i+"</p>");
i++;
});
//prependTo(),将子元素追加到父级的最前面
$(".prependTo").click(function(){
$("<p class='three'>我是子元素prependTo"+i+"</p>").prependTo($("#wrap"));
i++;
});
//after(),在当前元素之后追加(是同级关系)
$(".after").click(function(){
$("#wrap").after("<p class='siblings'>我是同级元素after"+i+"</p>");
i++;
});
//before(),在当前元素之前追加(是同级关系)
$(".before").click(function(){
$("#wrap").before("<p class='siblings'>我是同级元素before"+i+"</p>");
i++;
});
//insertAfter(),将元素追加到指定对象的后面(是同级关系)
$(".insertAfter").click(function(){
$("<p class='three'>我是同级元素insertAfter"+i+"</p>").insertAfter($("#wrap"));
i++;
});
//insertBefore(),将元素追加到指定对象的前面(是同级关系)
$(".insertBefore").click(function(){
$("<p class='three'>我是同级元素insertBefore"+i+"</p>").insertBefore($("#wrap"));
i++;
});
});
</script>
转自:https://blog.csdn.net/Immortal_W/article/details/86565060