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() 返回正在 append 的项目。

所以你的代码是:

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")

但是如果将其合并为一行，则在将 div 添加到body，这样你就可以取回 div 或 body。

---

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

能够创建分离 DOM 元素对于解析 HTML 字符串非常有用，并且还可以用于“批量”进行一些更改，而无需强制页面重绘。

将一个按钮移至独立的 div 并返回到 body 并没有多大意义，但它证明了原理。