jquery如何添加兄弟元素
墨初 Web前端 484阅读
在前端web页面中，我们经常需要通过js来操作DOM元素。下面73so博客就说一下如何利用js来给某个元素添加兄弟元素的方法。
jquery添加兄弟元素的方法
1、在选中元素之后插入新元素
jq中的.after()方法可在选定元素之后添加新的元素。
例：
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div class="div">这是元素的内容</div>
<script>
$('.div').after('<div>我是新添加的元素</div>');
</script>
2、jquery insertAfter()方法
jquery中的insertAfter()方法与after()方法相反，但作用一样都是将新的元素插入到选定元素的后面。
例：
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div class="div">这是元素的内容</div>
<script>
$('<div>我是新添加的元素</div>').insertAfter('.div');
</script>
注意：insertAfter()方法与after()方法是不同的。
3、jq在元素选定元素之前插入新元素
jq中的before()方法可以在选定元素之前插入新的元素。
例：
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div class="div">这是元素的内容</div>
<script>
$('.div').before('<div>我是新的元素</div>');
</script>
4、jq中的insertBefore()方法
jq中的insertBefore()方法与before()方法相反，但作用一样都是在选中元素之前插入新的元素。
例：
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div class="div">这是元素的内容</div>
<script>
$('<div>我是新的元素</div>').insertBefore('.div');
</script>
以上就是jquery中在选定元素之前或之后插入新的元素，大家可以参考一下。