javascript - 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>

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

Answer 3

直接从文档复制

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

这基本上说

ElementWhereIWantToAppendTo.prepend(This Is The Content That Is Added)
ElementIWantToAdd.prependTo(This Is Where I add The Content)