In jQuery how can I add something as a sibling?

Question

For example suppose I have

<div class="sibling1"></div>
<div class="sibling3"></div>

How can I insert

<div class="sibling2"></div>

Between the above? I have tried prepend but this makes a child not a sibling

Answer 1

In jQuery, there are a number of different options for inserting content in a particular position. It is all described quite well in the jQuery documentation page for DOM insertion outside an object.

To insert content outside an existing element (e.g. not a child), but positioned relative to that object, you have four options shown in this jQuery doc screenshot:

The difference between the first two and the last two is solely in which arguments are which. For the first two, the location for inserting is in the jQuery object and the content is in the function argument. For the last two, the content to be inserted is in the jQuery object and the destination is in the function argument. Because of chaining of multiple function calls, sometimes one or the other is more convenient.

As you can see, this lets you insert content before or after an existing object (which will make it a sibling of that object).

If you want it to be a child of that object, then you could use any of the six jQuery methods that can set/change the internal content including .append(), .appendTo(), .html(), etc...