hi,欢迎访问本站!
当前位置: 首页Web前端正文

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中在选定元素之前或之后插入新的元素,大家可以参考一下。

声明:无特别说明,转载请标明本文来源!
相关推荐