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

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

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

正如jQuery文档中所述：

.append（）和.appendTo（）方法执行相同的任务。 主要区别在于语法特定，内容和目标的放置。 使用.append（），方法前面的选择器表达式是插入内容的容器。 另一方面，使用.appendTo（），内容在方法之前，作为选择器表达式或动态创建的标记，并将其插入目标容器中。

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

同样的问题适用于：

• .prepend（） vs .prependTo（）
• .before（） vs .insertBefore （）
• .after（） vs .insertAfter（） 。

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等价物

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

VS

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

Answer 3

我认为有两点需要考虑：

1. 你有什么参考？ 如果您已经有一个包含要追加的元素的jQuery对象，那么使用.appendTo()而不是选择要追加的元素然后使用.append()是有意义的。

2. 你想/需要连锁function吗？ jQuery做得很好的一件事是允许你将函数链接在一起，因为每个函数都返回一个jQuery对象。 显然，如果你想在你附加的元素上调用函数，你将需要使用.appendTo()这样你之后链接的任何函数都将应用于被追加的元素，而不是被追加到的元素。

Answer 4

在上下文中

• 我个人使用这两个函数取决于我的函数正在做什么或使用它们的位置（ 上下文 ），你阅读代码的方式可能改变你喜欢编写代码的方式，它可能感觉更好主观地对你自己。

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

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

---

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

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

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

更有意义。

---

链接function

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

---

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

---

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

资源

• .append（）（jquery文档）

• .appendTo（）（jquery文档）

• 关于该主题的好博客文章（请参阅.append（）和.appendTo（）之间的区别）

Answer 5

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

目标HTML：

首先使用append（）：

 $( ".inner1" ) .append ( "
Test
" ) .addClass ( "addBorder" ); 

生产：

 
 
Test
  

第二个是appendTo（）

 $( "
Test
" ) .appendTo ( ".inner2" ) .addClass ( "addBorder" ); 

生产：

 
  
Test
  

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 ：

 $("
").appendTo(dest); 

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

 $(dest).append($("
"));