Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Use jQuery .prependTo() to Add HTML Content to Elements

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

jQuery prependTo: Main Tips

  • The jQuery .prependTo() adds HTML content to the beginning of selected elements.
  • The prependTo jQuery is different from .prepend() due to syntax rules: the new content precedes the function. Keep that in mind when using the chaining functionality.

Usage of .prependTo() Explained

The .prependTo() method makes jQuery insert HTML content at the beginning of the selected target. The following example adds a blockquote to the <p> element:

Example
$("button").click(() => {
    $("<blockquote>Hello World</blockquote>").prependTo("p");
});

Follow these syntax rules for the .prependTo() jQuery method:

$(content).prependTo(target);

  • content specifies the HTML content to insert to the selected elements.
  • target defines a target to which HTML elements will receive new content. You may either insert a selector here, or define the exact target (an HTML string, a jQuery object, a single element or an array).