Question

Before you mark this as a duplicate of JQuery: elegant way to replace set of elements with another set, please read my question.

The answers of the question which I mentioned above only allow the replacing of all the elements inside a certain parent selector with another set.

What I want is to replace a certain set, like for example #foo1 and #foo3 in the following example, but not #foo2 and #foo4:

<div id="main">
  <div id="foo1">Foo1</div>
  <div id="foo2">Foo2</div>
  <div id="foo3">Foo3</div>
  <div id="foo4">Foo4</div>
</div>

Just say I wanted to replace the elements #foo1 and #foo3 with two divs with an id of #foo5 and #foo6. I don’t want to change any other elements.

Would this be remotely possible? If so, how?

Answer 1

You can use replaceWith method.

$('#foo1').replaceWith($('#foo5'))​

Or:

$('#foo1').replaceWith('<div id="foo5">Content</div>')​