Question

除了语法之外，这些函数之间没有太大区别：

$('.target').append('text');
$('text').appendTo('.target');

正如jQuery docs所说：

.append（）和.appendTo（）方法执行相同的任务。专业差异在于语法特定，在放置中内容和目标。使用.append（），前面的选择器表达式该方法是插入内容的容器。同另一方面，.appendTo（），内容在方法之前，作为选择器表达式或动态创建的标记，以及它被插入到目标容器中。

所以在这种情况下最好使用.append（）和.appendTo（）？ 哪些代码样本只适合这两个函数中的一个而另一个不够好？

同样的问题适用于：

Answer 1

你自己说过 - 没有太大区别。但是，我选择使用的内容通常取决于方法链，前提是您已经引用了元素。

即

var _target, _content;

_target.append(_content).addClass('foo');
// will add the foo class to _target

_content.appendTo(_target).addClass('foo');
// will add the foo class to _content

Answer 2

创建元素时，使用.appendTo等效项

更顺畅

$("<div>", {text: "hello"}).appendTo("body");

VS

$("body").append( $("<div>", {text: "hello" }) /*Awkward having to call jQuery constructor here*/);

Answer 3

我认为有两点需要考虑：

你有什么参考？如果您已经有一个包含要追加的元素的jQuery对象，那么使用.appendTo()而不是选择要追加的元素然后使用.append()是有意义的。
您想要/需要连锁功能吗？ jQuery做得很好的一件事是允许你将函数链接在一起，因为每个函数都返回一个jQuery对象。显然，如果你想在你追加的元素上调用函数，你将需要使用.appendTo()，这样你之后链接的任何函数都将应用于被追加的元素，而不是被追加到的元素。

Answer 4

在上下文中

我个人使用这两个函数取决于我的函数正在执行的指令集或使用它们的位置（上下文），读取代码的方式可能改变你喜欢的方式编写代码，无论是对你自己的主观方式感觉都会更好。

无论哪种方式，它都是文字的，我发现自己不假思索地自动编写。

在每种情况下，如果主题是您正在操纵的区域，

$(target).append(content)
//within a function based around manipulating a specific area

似乎更有意义，而如果函数的主题是新内容那么

$(content).appendTo(target);
//appending data to something

更有意义。

链接功能

同样重要的是要注意，在每种情况下链接函数时更有意义。即。如果你已经在处理一个元素

$(target).toggle().append(content);

比添加另一条线更有意义，反之亦然。

<强>资源

Answer 5

就像他们说的那样，大多数是append（）和appendTo产生相同的结果。但是，当您开始链接结果时，您可以看到差异！

目标HTML：

<DIV class=.inner1><SPAN></span><SPAN></span></div>
<DIV class=.inner2><SPAN></span><SPAN></span></div>

首先使用append（）：

$( ".inner1" )
  .append   ( "<p>Test</p>" )
  .addClass ( "addBorder" );

产地：

<DIV class="inner1 addBorder"><SPAN></span><SPAN></span>
<P>Test</p>
</div>

第二个是appendTo（）

$( "<p>Test</p>" )
.appendTo ( ".inner2" )
.addClass ( "addBorder" );

产地：

<DIV class="inner2">
    <SPAN></span><SPAN></span>
    <P class="addBorder">Test</p>
</div>

Answer 6

当你将一些jQuery动作链接在一起时，这很有用。像这样：

$('.target').css({display:"block"}).fadeOut().appendTo('.somewhere');
// appends target to somewhere

或：

$('.target').css({display:"block"}).fadeOut().append('.somewhere');
// appends somewhere to target

这两个是不同的行为，因此将两者都用在一起很有用。

Answer 7

这主要是品味问题。

appendTo更方便的一种情况是当你引用一个元素而不是jQuery对象时，例如在变量dest中：

$("<div/>").appendTo(dest);

要使用append方法，您必须为元素创建一个jQuery对象才能调用它：

$(dest).append($("<div/>"));

在哪种情况下最好使用.append（）和.appendTo（）？

7 个答案:

在上下文中

链接功能

<强>资源