Code has been added to clipboard!

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

Reading time 1 min
Published Jan 22, 2018
Updated Oct 1, 2019

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:

Example
$("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.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/01/2021
3176 People Used
Only 97 Left
Rating
5.0