Question

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

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

请注意，选择器在.appendTo()和.append()中是相同的，但后者适用（在同一页面内），而前者则不然。为什么呢？

如何让.appendTo()使用此类（复杂）选择器？这两种方法的插值方式不同吗？我缺少一些语法吗？

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

谢谢！

Answer 1

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

此

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

需要

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

创建一个元素，否则它完全按照你的说法做 - 没什么！

否则你似乎有正确的顺序，就像这样：

.append()将参数指定的内容插入到匹配元素集中每个元素的结尾，如
```
$(Append_To_This).append(The_Content_Given_Here);
```
虽然.appendTo()使用其他方式：它会插入每个匹配元素集合中的元素到给定目标的末尾在参数中，如
```
$(The_Content_Given_Here).appendTo(Append_To_This);
```

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

Answer 2

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

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

此处有更多信息：http://api.jquery.com/appendTo/

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

$('div/>',

这不是选择任何东西。

Answer 3

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

$container = $("#containerdiv");

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

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

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

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

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

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

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

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

Answer 4

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

Answer 5

两种方法都执行相同的任务。主要区别是 -

在语法中，
放置内容和目标。

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

另一方面，对于.appendTo()，内容在方法之前，作为选择器表达式或动态创建的标记，并将其插入目标容器中。

Answer 6

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

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

Answer 7

.append（）和.appendTo（）方法执行相同的任务，只有要插入的目标和html内容语法才会出现。完成http://api.jquery.com/appendTo/

Answer 8

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

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

Answer 9

appendTo() 方法用于在所选元素的末尾添加其他内容。与jQuery append() 方法相同。 append() 和 appendTo() 方法之间只有句法上的区别。

.appendTo() 语法：

$(content).appendTo(selector)

.append() 语法：

$(selector).append(content)

jQuery：append（）vs appendTo（）

9 个答案: