jQuery .insertBefore(): Add Content Before Specified HTML Elements

jQuery insertBefore: Main Tips

• The jQuery .insertBefore() method adds content before the specified HTML elements.
• Differently from the .before() method, .insertBefore() requires new content parameter to precede the target elements.
• To add content as last descendant of the element, use .prepend(). To add it as a last child, remember learning about jQuery .append() before.

Learn to Use .insertBefore()

The .insertBefore() jQuery command adds content before the indicated elements. The example below is set to add a header before the <div> element:

$("button").click(() => {
    $("<h1>Hello world!</h1>").insertBefore("div");
});

To use jQuery .insertBefore() method, you will need this syntax:

$(content).insertBefore(target);

.insertBefore() jQuery syntax accepts two arguments:

• content to insert.
• target to specify before which elements will content be inserted. It can be specified by either using a selector, or defining an exact jQuery object, HTML string, element, or an element array.

Tip: use jQuery .insertAfter() method to add content after specified HTML elements.

Note: if you wish to add content as children of the element, learn about jQuery .prepend() and jQuery .append() before doing that.