在哪种情况下使用 .append() 更好，哪个 .appendTo()？答案

【问题标题】：In which case it is better to use the .append(), and which .appendTo()?在哪种情况下使用 .append() 更好，哪个 .appendTo()？
【发布时间】：2012-07-17 05:31:17
【问题描述】：

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

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

如jQuery docs中所说：

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

那么在什么情况下最好使用.append()，哪个.appendTo()？ 哪些代码示例只适合这两个函数中的一个而另一个不够好？

同样的问题适用于：

【问题讨论】：

你已经列出了确切的区别，你还想要什么？
我需要简短的例子，其中只适合这两个函数中的一个而另一个不够好。
如果您使用链接来应用另一种方法，它将始终以第一个选择器为目标。 $('.target').append('<div>Hello</div>').hide() 将在附加 div 后隐藏 .target 元素。 $('<div>Hello</div>').appendTo('.target').hide() 将隐藏 div 后将其附加到 .target。
@devnull69 [+1] 谢谢你的回答，我明白了。重点在于链接。不同的元素会受到链中函数的影响，同时需要（.append 和 .appendTo）以提高代码的可读性。

标签： jquery append prepend

【解决方案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

【讨论】：

【解决方案2】：

在创建元素时，使用.appendTo 等效项会更流畅

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

对

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

【讨论】：

从未见过{text} 格式。为什么不只是$( '<div>hello</div>' )？这会让 if 感觉不像是 .innerHTML 电话吗？ :)
@ThinkingStiff 将调用 html 解析器而不是简单地创建一个元素。另外，如果你有很多动态属性，写some-attribute: variable 比乱写some-attribute="'+variable+'"... 之类的引号要容易得多，你可以看到这些以jsperf.com/domvsparser232 开头很慢

【解决方案3】：

我认为有两点需要考虑：

您已经参考了哪些内容？如果您已经有一个包含要附加的元素的 jQuery 对象，那么使用 .appendTo() 而不是选择要附加的元素然后使用 .append() 是有意义的。
您想要/需要链接函数吗？ jQuery 做得好的一件事是允许您将函数链接在一起，因为每个函数都返回一个 jQuery 对象。显然，如果您想在要附加的元素上调用函数，则需要使用 .appendTo() 以便在此之后链接的任何函数都将应用于要附加的元素，而不是要附加的元素。

【讨论】：

【解决方案4】：

上下文

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

无论哪种方式，它都是相当字面的，我发现自己不假思索地自动写了每个。

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

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

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

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

更有意义。

链式函数

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

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

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

资源

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

当您将几个 jQuery 操作链接在一起时，它很有用。像这样：

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

或：

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

这两个是不同的动作，因此同时拥有它们很有用。

【讨论】：

【解决方案7】：

这主要是口味问题。

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

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

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

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

【讨论】：