jquery如何添加兄弟元素
墨初 Web前端 898阅读
在前端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中在选定元素之前或之后插入新的元素,大家可以参考一下。