jQuery中的append和prepend，after和before的区别和用法

作者 拓荒 日期 2017-06-15
jQuery

一、after()和before()方法的区别

after()方法是将方法里面的参数添加到jQuery对象后面去；
如：A.after(B)的意思是在A的后面添加B，B在A标签的外面；

<div>这是目标元素的内容<span>这是目标元素子元素的内容</span></div>
<script type="text/javascript">
$("div").after('<a href="http://tuohuang.github.io">这是after函数加上去的内容</a>')
</script>

最后的结果是：

<div>这是目标元素的内容<span>这是目标元素子元素的内容</span></div>
<a href="http://tuohuang.github.io">这是after函数加上去的内容</a>

before()方法是将方法里面的参数添加到jQuery对象前面去。
如：A.before(B)的意思是在A的前面添加B，B在A标签的外面；

<div>这是目标元素的内容<span>这是目标元素子元素的内容</span></div>
<script type="text/javascript">
$("div").before('<a href="http://tuohuang.github.io">这是before函数加上去的内容</a>')
</script>

最后的结果是：

<a href="http://tuohuang.github.io">这是before函数加上去的内容</a>
<div>这是目标元素的内容<span>这是目标元素子元素的内容</span></div

二、insertAfter()和insertBefore()的方法的区别

其实是将元素对调位置；
可以是页面上已有元素；也可以是动态添加进来的元素。
如：A.insertAfter(B);即将A元素调换到B元素后面；

<div>AAA</div>
<span>BBB</span>
<script type="text/javascript">
$("div").insertAfter($("span"))
</script>

最后的结果是：

<span>BBB</span>
<div>AAA</div>

三、append()和appendTo()方法的区别

append()方法是将方法里面的参数添加到jQuery对象中来；
如：A.append(B)的意思是将B放到A的里面，且紧靠着A的闭合标签；

<div>这是目标元素的内容<span>这是目标元素子元素的内容</span></div>
<script type="text/javascript">
$("div").append('<a href="http://tuohuang.github.io">这是append函数加上去的内容</a>')
</script>

最后的结果是：

<div>
    这是目标元素的内容
    <span>这是目标元素子元素的内容</span>
    <a href="http://tuohuang.github.io">这是append函数加上去的内容</a>
</div>

appendTo()方法是将jQuery对象添加到appendTo指定的元素中去。
如：B.appendTo(A)的意思和上面A.append(B)是一样的

四、prepend()和prependTo()方法的区别

prepend()方法是将方法里面的参数添加到jQuery对象中来；
如：A.prepend(B)的意思是将B放到A的里面，且紧靠着A的开始标签；

<div>这是目标元素的内容<span>这是目标元素子元素的内容</span></div>
<script type="text/javascript">
$("div").prepend('<a href="http://tuohuang.github.io">这是prepend函数加上去的内容</a>')
</script>

最后的结果是：

<div>
    <a href="http://tuohuang.github.io">这是prepend函数加上去的内容</a>
    这是目标元素的内容
    <span>这是目标元素子元素的内容</span>
</div>

prependTo()方法是将jQuery对象添加到prependTo指定的元素中去。
如：B.prependTo(A)的意思和上面A.prepend(B)是一样的

FEATURED TAGS
jQuery