8

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

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

正如jQuery 文档中所说：

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

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

同样的问题适用于：

4

7 回答 7

3

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

IE

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
于 2012-07-18T08:19:58.477 回答
2

创建元素时，使用.appendTo等价物会更顺畅

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

对比

$("body").append( $("<div>", {text: "hello" }) /*Awkward having to call jQuery constructor here*/);
于 2012-07-18T08:19:50.027 回答
1

我认为主要有两点需要考虑：

  1. 您已经参考了哪些内容？如果您已经有一个包含要附加的元素的 jQuery 对象，那么使用.appendTo()而不是选择要附加的元素然后使用.append().

  2. 您想要/需要链接功能吗？jQuery 擅长的一件事是允许您将函数链接在一起，因为每个函数都返回一个 jQuery 对象。显然，如果您想在要附加的元素上调用函数，您将需要使用.appendTo()，以便在此之后链接的任何函数都将应用于要附加的元素，而不是要附加的元素。

于 2012-07-18T08:21:58.307 回答
1

在上下文中

  • 就我个人而言，我使用这两个函数取决于我的函数正在执行的指令集或它们的使用位置（上下文），您阅读代码的方式可能会改变您更喜欢编写代码的方式，并且主观上感觉更好给你自己的。

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

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

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

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

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

更有意义。

链接函数

  • 同样重要的是要注意，在每种情况下链接函数时也更有意义。IE。如果你已经在处理一个元素
$(target).toggle().append(content);

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

资源

于 2012-07-18T08:24:54.353 回答
1

就像他们说的，大多数 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>
于 2016-02-21T11:43:53.440 回答
0

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

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

或者：

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

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

于 2012-07-18T08:20:45.447 回答
0

这主要是口味问题。

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

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

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

$(dest).append($("<div/>"));
于 2012-07-18T08:36:09.013 回答