jQuery：append() 与 appendTo()

jQuery: append() vs appendTo()

提问by Yevgeniy

I am testing jQuery's .append()vs .appendTo()methods using following code:

我正在使用以下代码测试 jQuery 的.append()vs.appendTo()方法：

$('div/>', {
    id : id,
    text : $(this).text()
    }).appendTo('div[type|="item"]#'+id);
$('div[type|="item"]#'+id).append($(this).text());

Note that the selectors are identical in .appendTo()and .append(), yet the latter works (within the same page), while the former does not. Why?

请注意，选择在相同的.appendTo()和.append()，但后者的作品（在同一页内），而前者没有。为什么？

How do I get .appendTo()to work with this type of (complex) selector? Do the two methods interpolate differently? Is there some syntax I'm missing?

我如何开始.appendTo()使用这种（复杂的）选择器？这两种方法的插值方式不同吗？有没有我遗漏的语法？

I don't want to clutter the post with impertinent code: suffice it to say that elements referenced by selectors exist, as is evidenced by the .append()method producing desired result. Let me know if more info is needed.

我不想用无礼的代码来弄乱帖子：只要说选择器引用的元素存在就足够了，正如.append()产生所需结果的方法所证明的那样。如果需要更多信息，请告诉我。

Thanks!

谢谢！

回答by adeneo

To answer the question, you don't have an element to appendToanything, as you're missing characters (in your case it's an opening angle bracket<).

要回答这个问题，您没有appendTo任何元素，因为您缺少字符（在您的情况下，它是一个左尖括号<）。

This

这个

$('div/>',{});

needs to be

需要是

$('<div/>',{});

to create an element, otherwise it does exactly what you say it does - nothing!

创建一个元素，否则它会完全按照你说的去做——什么都没有！

---

---

Otherwise you seem to have the order of things right, it's like this:

否则你似乎有正确的顺序，它是这样的：

• .append()inserts the content specified by the parameter, to the end of each element in the set of matched elements, as in

  $(Append_To_This).append(The_Content_Given_Here);
  

• while .appendTo()works the other way around: it insert every element in the set of matched elements to the end of the target given in the parameter, as in

  $(The_Content_Given_Here).appendTo(Append_To_This);
  

• .append()将参数指定的内容插入到匹配元素集中每个元素的末尾，如

  $(Append_To_This).append(The_Content_Given_Here);
  

• 而相反的.appendTo()工作方式：它将匹配元素集中的每个元素插入到参数中给定的目标的末尾，如

  $(The_Content_Given_Here).appendTo(Append_To_This);
  

There's also .prepend()and prependTo()which works exactly the same, with the only difference being that the prepended elements are added at the beginning of the target elements content instead of the end.

还有.prepend()and 的prependTo()工作原理完全相同，唯一的区别是前置元素添加在目标元素内容的开头而不是结尾。

回答by René Wolferink

appendappends the parameter to the object you're working on.

append将参数附加到您正在处理的对象。

appendToappends the object you're working on to the parameter.

appendTo将您正在处理的对象附加到参数。

More info here: http://api.jquery.com/appendTo/

更多信息在这里：http: //api.jquery.com/appendTo/

aside from that, there is something wrong here:

除此之外，这里还有一些问题：

$('div/>',

this is not selecting anything.

这不是选择任何东西。

回答by Kannan J

I faced similar query and on researching got some more insights. It was confusing to hear target, element etc and I prefer to visualise the outer selector as $container and element added as $widget. In plain english, I want to add widget to container. Both append and appendTo can be used in the following way and you get exact same result.

我遇到了类似的查询，并在研究中获得了更多见解。听到目标、元素等令人困惑，我更喜欢将外部选择器可视化为 $container，将元素添加为 $widget。用简单的英语，我想将小部件添加到容器中。append 和 appendTo 都可以按以下方式使用，您会得到完全相同的结果。

$container = $("#containerdiv");

$container = $("#containerdiv");

$widget = $("<div> <h1 id='title'> widget </h1> </div>")

$widget = $("<div> <h1 id='title'> widget </h1> </div>")

Approach 1 : $container.append($widget)

方法一： $container.append($widget)

Approach 2 : $widget.appendTo($container)

方法二： $widget.appendTo($container)

The key difference is what gets returned. In the first case, $container is returned, and in second case, $widget is returned. This will be useful if you are chaining the request with another jquery statement. If you want to work with $container, use first construct and to work with widget, use the second way. For example,

主要区别在于返回的内容。在第一种情况下，返回 $container，在第二种情况下，返回 $widget。如果您将请求与另一个 jquery 语句链接起来，这将非常有用。如果您想使用 $container，请使用第一种构造并使用小部件，请使用第二种方式。例如，

if you want to append 2 widgets to the container, you would give

如果你想将 2 个小部件附加到容器中，你会给

$container.append($widget1).append($widget2)

$container.append($widget1).append($widget2)

and if you want to add a widget and then widget's title to say 'Cool Widget', you would give

如果你想添加一个小部件，然后小部件的标题说“酷小部件”，你会给

$widget.appendTo($container).find('#title').text("Cool Widget")

$widget.appendTo($container).find('#title').text("Cool Widget")

回答by Wang Zhou

To make this two easier to understand.

为了让这两个更容易理解。

Suppose I have A B Cthree ordered charters.

假设我有ABC三个有序包机。

A appendCmeans MOVE C before A, this results C's reloaction but not A, so we have C A B.

A appendTOCmeans MOVE A after C, this results A's relocation but not C, so we have B C A.

A appendC意味着在 A 之前移动 C，这导致 C 的重新定位而不是 A，所以我们有CAB。

A appendTOC表示在 C 之后移动 A，这导致 A 的重定位而不是 C，所以我们有BCA。

• Both of appendand 'appendTo' has the same result of 甲 and 丙, but the whole order of the three charters changes.
• Due to the relocation of OOO.appendTo(XXX), the XXX should be exists before this control.

• ofappend和 'appendTo' 的结果与甲和丙相同，但三个宪章的整个顺序发生了变化。
• 由于 OOO.appendTo(XXX) 的重定位，XXX 应该存在于该控件之前。

回答by Zigri2612

Both methods perform the same task. The major difference is --

两种方法都执行相同的任务。主要区别在于——

• in the syntax-specifically,
• in the placement of the content and target.

• 在语法方面，
• 在内容和目标的位置。

With .append(), the selector expression preceding the method is the container into which the content is inserted.

使用.append()，方法前面的选择器表达式是插入内容的容器。

With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

用.appendTo()，另一方面，内容先于方法，既可以作为选择器表达式或动态创建的标记，并且其被插入到目标容器。

回答by Umang Patwa

The .append()method inserts the specified content as the last childof each element in the jQuery collection (To insert it as the first child, use .prepend()).

该.append()方法将指定的内容作为jQuery 集合中每个元素的最后一个子元素插入（要将其作为第一个子元素插入，请使用.prepend()）。

The .append()and .appendTo()methods perform the same task. The major difference is in the syntaxspecifically, in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

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

回答by user1142121

$('#someDiv').append(someStuff); someStuff.appendTo($('someDiv'));//same result here, just different way to do it depending on your sitch

$('#someDiv').append(someStuff); someStuff.appendTo($('someDiv'));//这里的结果相同，只是根据您的sitch不同的方式来做到这一点

回答by MetNP

Return resultis the only difference and it makes appendTohandier for methods-chaining:

返回结果是唯一的区别，它使appendTo方法链更方便：

$("<div>...</div>").appendTo(target).hide();  //hide new-element, not the whole target

回答by user2949337

The .append() and .appendTo() methods perform the same task and only target and html content to be inserted syntax will chnage . go through http://api.jquery.com/appendTo/

.append() 和 .appendTo() 方法执行相同的任务，并且只有要插入语法的目标和 html 内容才会改变。通过http://api.jquery.com/appendTo/