关于append,appendTo,prepend,prependTo的区别

之前做项目对于这几个的方法总是有点模糊,尤其是prepend和prependTo;

1.append

<style>
    span{
        background:yellow;
    }
    .test{
        background:#ccc;
        height:50px;
    }
    .test_1{
        background:red;
    }

</style>
<body>
    <div class="test"><span class="test_1">我就站在这里</span></div>
</body>
<script>
    $(‘.test‘).append("<span>我是测试快</span>");
</script>

append是插入元素内部的后面

2.appendTo

$(‘<span>我是测试快</span>‘).appendTo($(‘.test‘));

和上面产生一样的效果,就是写法换了一下

3.prepend

$(‘.test‘).prepend("<span>我是测试快</span>");

这个方法和append做对比

append是插入元素内部的后面,而prepend是插入元素内部的最前面

4.prependTo

$(‘<span>我是测试快</span>‘).prependTo($(‘.test‘));

上面的效果和prepend中的效果一样

时间: 2024-08-24 21:47:50

关于append,appendTo,prepend,prependTo的区别的相关文章

jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <script src="jquery.js"></script> </head> <

Jquery中的append()和prepend(),after()和before()的区别

Jquery中的append()和preappend(),after()和before()的区别 append()和prepend() 假设 <div class='a'> //<---you want div c to append in this <div class='b'>b</div> </div> 使用 $('.a').append($('.c')); 则会这样: <div class='a'> //<---you wan

JQuery中after() append() appendTo()的区别

首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").after("<a>aa</a>") 结果是<span></span><a>aa</a> 不是 <span><a>aa</a></span> 而如果用 append() $(&q

jquery中append、prepend, before和after方法的区别(一)

原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() 与before()是在元素的外面插入内容(其内容变成元素的兄弟节点). 1. append()和prepend() <div class='a'> <div class='b'>b</div> </div> 1 2

添加新内容的四个 jQuery 方法:append,prepend,after,before

添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); //jQuery prepend() 方法在被选元素的开头插入内容. $("p").prepend("Some prepended te

比较jquery中的after(),append(),appendTo()方法

html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</button> <button id="b2">append函数</button> <button id="b3">appendTo函数</button> js页面 $(document).ready(functio

jQuery中的append()和prepend(),after()和before()的差别

jQuery中的append()和preappend(),after()和before()的差别 append()和prepend() 如果 <div class='a'> //<---you want div c to append in this <div class='b'>b</div> </div> 使用 $('.a').append($('.c')); 则会这样: <div class='a'> //<---you wan

jquery中append跟prepend的用法

jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body").prepend('<form id="form01" name="user_name" action="login.php" method="post" $amp;>amp;$lt;/form$amp;>apos

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML. 不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素.可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素. 在下面的例子中,我们创建若干个新元素.这些元素可以通过 text/HTML.jQuery 或者 JavaScript/DOM 来创建.然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样