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

$editor.insertAfter($canvas.last()) If you only want it inserted once, reduce the scope of what you are inserting it after — Taplar
– Taplar, Commented May 31, 2019 at 16:42
Or since it's a detached fragment at this point, simply $canvas.add(...html...) would probably work too — Taplar
– Taplar, Commented May 31, 2019 at 16:43
@Taplar thanks, it worked! If you want to write an answer I'll accept it :) — davidtgq
– davidtgq, Commented May 31, 2019 at 16:47
The second method also worked with $canvas = $canvas.add($editor) — davidtgq
– davidtgq, Commented May 31, 2019 at 16:48

Taplar · Accepted Answer · 2019-05-31 16:49:12Z

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

answered May 31, 2019 at 16:49

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

davidtgq Over a year ago

I'm doing string concatenation where I can, but here initializeEditor needs it to be separate. The other option is to give it a class/id and then select it after inserting, which I don't know if is better.

Taplar Over a year ago

The string concatentation approach is simply trying to remove the overhead of parsing dom nodes twice. If that doesn't make sense in your scenario, or you don't prefer it, that's entirely at your discresion, :)

davidtgq Over a year ago

Oh yeah I agree with your advice, what I mean is that I just have to pass $editor by itself to initializeEditor; passing the entire $canvas won't work. Actually optimization is quite important to me as well, so I appreciate the advice! I know creating fragments is worse for performance, but I'm doing it for refactoring so I can have a function that returns a fragment that has event listeners already attached. But I only do it in O(1) though, so not too bad.

davidtgq Over a year ago

For anyone interested, I benchmarked both methods, got 0.9s with insertAfter(last) and 0.6s with add

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related