javascript - `appendTo()` 在哪里可以与 `htmlString` 一起使用？

Question

appendTo 的 API 文档列出可以为目标选择一个 HTML 字符串的方法。

但是，这似乎没有用，因为该集合仍然包含原始元素，并且 HTML 字符串似乎没有添加到 DOM 中的任何地方，我也看不到它可用的情况。

var b = button.appendTo('<div>').appendTo('body');

b 是一个按钮，但它没有包裹在 div 或任何东西中。

你可以在 http://jsfiddle.net/0dgLe5sj/ 看到这个

在什么地方 append 到 HTML 字符串(页面上尚不存在)会有用？

Answer 1

appendTo() 返回被追加的项目。

所以你的代码是:

var btn = button.appendTo('<div>');
btn.appendTo('body');

如您所见，您将它移动到一个 div 中，然后立即将它移动到 body 中。所以当你最后看它时，它在 body 内部。

也许你的意思是:

var b = button.appendTo($('<div>').appendTo('body'));

这会将 div append 到正文，然后将 btn append 到该 div。

更新 fiddle :http://jsfiddle.net/0dgLe5sj/8/

或者，如果您想先添加到 div:

var b = button.appendTo("<div>");
b.parent().appendTo("body")

但是如果你将它组合成一行，你不能使用 .appendTo 把按钮放回变量中，因为你正在添加 div 到body 所以你要取回 div 或 body。

---

要解决“这部分有用的地方”:

能够创建分离的 DOM 元素对于解析 HTML 字符串非常有用，也可用于“批处理”一些更改而不强制页面重绘。

将一个按钮移到一个分离的 div 上，然后将按钮移回正文中并没有多大意义，但它证明了原则。