js追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...

[html] view plain copy

<!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;
}
.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" onclick="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").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 para=document.createElement("p");
// 创建文本节点
var node=document.createTextNode("我是子集appendChild新段落。");
// 把文本节点添加到p节点里
para.appendChild(node);
// 查找div1
var element=document.getElementById("wrap");
// 把p节点添加到div1里
element.appendChild(para);
}
</script>

以下是单击每个按钮之后的效果

转载于:https://blog.51cto.com/120662/1922447

js追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...相关推荐

jq追加元素的几种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
js获取元素的五种方法
在使用Javascript的过程中我们经常都需要获取元素 ,接下来就给大家介绍一下我知道的在js中获取元素的五种方法. 1.根据选择器查找元素 1.1 document.querySelector( ...
js 获取元素的几种方法
获取元素/节点/标签的几点方法 getElementById getElementsByTagName getElementsByName getByClass √ / ...
JS追加元素和获取兄弟元素、父元素的方法
JS追加元素的几种方法 append(),在父级最后追加一个子元素 appendTo(),将子元素追加到父级的最后 prepend(),在父级最前面追加一个子元素 prependTo(),将子元素追加 ...
JavaScript隐藏元素的5种方法~纯干货分享
Hello ~ 可爱的小伙伴我们又见面啦. 下面是我和大家分享的JS隐藏元素的5种方法,希望可以帮助到有需要的小伙伴. 让我们一起来看看吧 GO! 第一种 <!DOCTYPE html> ...
JS数组移除元素的八种方法
JS数组移除元素的八种方法一.修改arr的length方法 let arr = [1,2,3,4,5,6,7,8,9]; arr.length = 3; console.log('length',a ...
【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
JS动态创建元素（两种方法）
前言创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&quo ...

js追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...

js追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...相关推荐

最新文章

热门文章