jQuery:append()vs appendTo()

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。用简单的英语来说，我想将小部件添加到容器中。可以按以下方式使用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)

如果要添加一个小部件，然后添加小部件的标题为“ Cool Widget”，则可以

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