如何将 jQuery 元素添加到现有元素的末尾（而不是将其附加到每个元素）？答案

【问题标题】：How to add jQuery element to the end of existing elements (instead of appending it to each)?如何将 jQuery 元素添加到现有元素的末尾（而不是将其附加到每个元素）？
【发布时间】：2019-10-17 07:49:54
【问题描述】：

为了使appendTo工作，必须有一个包装器，否则它会添加两个副本（每个div一个）：

let $canvas = $(`<div></div>`, {html: `<div>1</div><div>2</div>`});
let $editor = $(`<div></div>`);
$editor.appendTo($canvas);
initializeEditor($editor);

有没有一种方法可以添加到末尾以便不需要换行？我试过这样insertAfter，但它似乎没有做任何事情：

let $canvas = $(`<div>1</div><div>2</div>`);
let $editor = $(`<div></div>`);
$editor.insertAfter($canvas);
initializeEditor($editor);

【问题讨论】：

$editor.insertAfter($canvas.last()) 如果您只想插入一次，请缩小插入的范围
或者因为此时它是一个分离的片段，所以简单的$canvas.add(...html...) 可能也可以工作
@Taplar 谢谢，它成功了！如果你想写一个答案我会接受的:)
第二种方法也适用于$canvas = $canvas.add($editor)

标签： jquery dom insertafter

【解决方案1】：

鉴于您的具体情况，我建议您切换回纯字符串。

let canvas = '<div>1</div><div>2</div>';
let editor = '<div></div>';

canvas += editor;
initializeEditor($(canvas));

或者类似的东西。现在我为什么建议这个？因为每次您执行$(html) 时，您都在让 jQuery 将 html 解析为文档片段中的 DOM 节点。切换回字符串，删除这两个操作以支持简单的字符串连接。

然后，一旦你把 html 写下来，你可以将它作为一个 jQuery 对象传递给你的方法，如果你需要它的话。

否则，您可以缩小要插入的元素的范围...

$editor.insertAfter($canvas.last())

或者只是将元素添加到 jQuery 对象结果堆栈的末尾...

$canvas.add(...html...)

【讨论】：

我正在尽可能地进行字符串连接，但这里initializeEditor 需要将它分开。另一种选择是给它一个class/id，然后插入后选择它，我不知道这是否更好。
字符串连接方法只是试图消除两次解析 dom 节点的开销。如果这在您的场景中没有意义，或者您不喜欢它，那完全由您决定，:)
哦，是的，我同意你的建议，我的意思是我只需将$editor 本身传递给initializeEditor；通过整个$canvas 将不起作用。实际上优化对我来说也很重要，所以我很感激你的建议！我知道创建片段对性能来说更糟，但我这样做是为了重构，所以我可以有一个函数返回一个片段，该片段已经附加了事件侦听器。但我只在 O(1) 中这样做，所以还不错。
对于任何感兴趣的人，我都对这两种方法进行了基准测试，insertAfter(last) 得到了 0.9 秒，add 得到了 0.6 秒