jQuery prepend with examples

jQuery prepend with examples

The prepend method

The prepend method, as opposed to jQuery append method, adds content at the beginning of specified element. For example:

p.prepend (“content”) will add content at the beginning of paragraphs in the document.

See an example of prepend method

This chapter only explains how to use the $.prepend method with examples. First of all syntax of using prepend() method in jQuery.

Syntax of prepend() method

The syntax of prepend jQuery method is:

selector.prepend(“content to be added”);

Where selector can be an element where you want to add content.

Example of using .prepend in paragraph

In the following example, we will show you how to add simple text at the beginning of a paragraph. As you click on the button in the example page, it will add given plain text at the beginning of the paragraph.

Experience this example online

jQuery prepend to add HTML tags Example

Similarly, you can add content that contains HTML tags by using prepend method. For example, it can contain <i> tag, links, images, etc.

The example below adds bold text and a link as you click on the button.

Experience this example online


Related: append method of jQuery | jQuery after | jQuery before

Was this article helpful?