prepend()和prependTo()之间的区别

Question

我无法理解prepend()和prependTo()之间的区别.有人可以帮助我理解差异.

Answer 1

这真的只是为了链接.

x.prependTo(y)

将预先考虑x到y,并返回原来的集合x.

y.prepend(x)

也将x提前,y但将返回原始集合y.

Answer 2

根据 jQuery 文档 prepend

该.prepend()和.prependTo()方法执行相同的任务。主要区别在于语法——特别是内容和目标的位置。使用.prepend()，方法前面的选择器表达式是插入内容的容器。用.prependTo()，另一方面，内容先于方法，既可以作为选择器表达式或动态创建的标记，并且其被插入到目标容器。

一些例子：

prepend 示例 1

<div id="a">
    <p>a</p>
</div>
<div id="b">
    <p>b</p>
</div>
<script>
    $('#a').prepend('#b');
</script>

结果是*：

<div id="a">
    #b
    <p>a</p>
</div>
<div id="b">
    <p>b</p>
</div>

这是因为prepend将字符串视为 HTML 内容而不是选择器

prepend 例子2

<div id="a">
    <p>a</p>
</div>
<div id="b">
    <p>b</p>
</div>
<script>
    $('#a').prepend($('#b'));
</script>

结果是：

<div id="a">
    <div id="b">
        <p>b</p>
    </div>
    <p>a</p>
</div>

prependTo 例3

<div id="a">
    <p>a</p>
</div>
<div id="b">
    <p>b</p>
</div>
<script>
    $('#a').prependTo('#b');
</script>

结果是*：

<div id="b">
    <div id="a">
        <p>a</p>
    </div>
    <p>b</p>
</div>

_{* 为了使代码可读，这些示例中的空格将是错误的}