Guide on jQuery .prepend(): Add Content as the First Child

jQuery prepend: Main Tips

• jQuery .prepend() adds content as the first child of the selected element.
• This method achieves the same result as .prependTo()), but uses different syntax. This is important when using chaining.
• The .prepend() jQuery method is opposite to .append() which inserts content as the last child.

Using .prepend()

The method .prepend() inserts content at the beginning of the matched element as its first child. The content appears inside the selected element's tag but before all other content. The example below makes jQuery prepend HTML content to the <p> element:

$("button").click(() => {
    $("p").prepend("<b>This is the beginning of this paragraph</b>");
});

Follow this syntax to add content with .prepend() jQuery function:

$("selector").prepend(content);

The content parameter specifies an HTML string, array of elements, text node or jQuery object to add at the beginning of an element. You can add multiple pieces of content, but make sure you separate them with commas.

Note: instead of content, you may add a function that returns content to insert.