How to add jQuery element to the end of existing elements (instead of appending it to each)?

Question

In order to make appendTo work, there must be a wrapper, otherwise it will add two copies (one to each div):

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

Is there a method to add to the end so that the wrap isn't necessary? I tried insertAfter like this, but it doesn't seem to do anything:

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

Answer 1

Given your specific scenario, I would advise you to switch back to plain strings.

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

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

Or something like that. Now why do I suggest this? Becase each time you do $(html) you are making jQuery parse the html into DOM nodes, in a document fragment. Switching back to strings, you remove those two operations in favor of a simple string concatenation.

Then once you have the html down, you can pass it into your method as a jQuery object if you need it to be like that then.

Otherwise, you can either reduce the scope of the elements you are inserting after...

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

Or just add the element to the end of the jQuery object result stack...

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