Inserting multiple elements using jquery .html

Question

I'm currently using jquery .html for DOM insertion. Is there a way I can insert multiple elements?

So far I have tried using && or even using a comma inserting multiple elements but none of them seems to be feasible. Separating it would also likely not work.

$('#header .aim-breadcrumbs').html($('.layout-container .region-breadcrumb') && $('#header .aim-nav .connect')); $('#header .aim-breadcrumbs').html($('.layout-container .region-breadcrumb', '#header .aim-nav .connect');

$('#header .aim-breadcrumbs').html($('.layout-container .region-breadcrumb'); $('#header .aim-breadcrumbs').html($('#header .aim-nav .connect');

I think you want .append() not .html(), and you need to specify elements, not just a list of classes and/or IDs — j08691
– j08691, Commented Jun 15, 2017 at 2:33
.html() will override the previous one if you want multiple then this is not the correct to use. try .append() — guradio
– guradio, Commented Jun 15, 2017 at 2:34
If you want to use the same div for multiple things .html would be better because you don't need to clear the contents before appending. — Icewine
– Icewine, Commented Jun 15, 2017 at 2:38
Are you trying to move existing elements around, or insert/add new elements to the page? — j08691
– j08691, Commented Jun 15, 2017 at 2:44

Will Reese · Accepted Answer · 2017-06-15 02:41:29Z

3

You are really close. You just need to put the comma inside your selector string. Don't use two strings.

$('#header .aim-breadcrumbs').html($('.layout-container .region-breadcrumb, #header .aim-nav .connect'));

This will work, but as everyone is already shouting, .append is the typical way of doing this.

$('#header .aim-breadcrumbs').append($('.layout-container .region-breadcrumb, #header .aim-nav .connect'));

edited Jun 15, 2017 at 2:41

answered Jun 15, 2017 at 2:36

Will Reese

2,8512 gold badges17 silver badges28 bronze badges

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

3 Comments

j08691 Over a year ago

Exactly what kind of magical unicorn elements will this add to the document? You can't just list classes and IDs and no actual elements and try to append them to something. You're also missing closing parenthesis.

Will Reese Over a year ago

I fixed the parenthesis. It's not just adding random classes. If you pass a jquery object like $(.selector), it will move or copy that element for you, depending on the method you use.

clestcruz Over a year ago

Thank you for that insights, wasn't aware that inserting a comma inside the string would be valid

Collectives™ on Stack Overflow

Inserting multiple elements using jquery .html

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related