jQuery prepend() Method

Quiz

The prepend() method in jQuery is used to insert content at the beginning of each element in the set of matched elements.

This method accepts a parameter named "content", which can be a HTML element, DOM element, or a jQuery object.

If we want to insert content at the end of the the selected elements, we need to use the append() method.

Syntax

Following is the syntax of prepend() method in jQuery −

$(selector).prepend(content,function(index,html))

Parameters

This methods accepts the following parameters −

content: The content to be inserted. This can be HTML elements, DOM elements, or jQuery objects representing elements.
function(index, html): (optional) A callback function that is called for each selected element.
index: The index of the currently processed element.
html: The HTML content of the currently processed element.

Example 1

In the following example, we are using the prepend() method to insert a HTML element () at the beginning of the paragraph element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
      $('p').prepend('<span><i> New span element appended...</i></span>');
    })
  });
</script>
</head>
<body>
<p>Paragraph element.</p>
<button>Click to add</button>
</body>
</html>

After clicking the button, the prepend() method adds the new element at the beginning of element.

Example 2

In this example, we are using DOM methods to create a element and prepending to the element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
     const newspan = document.createElement('span');
     newspan.textContent = 'New span element appended...';
     $('p').prepend(newspan);
    })
  });
</script>
</head>
<body>
<p>Paragraph element.</p>
<button>Click to add</button>
</body>
</html>

When the button is clicked, the new element will be inserted at the beginning of the element.

Example 3

Here, we are creating a jQuery object representing a element, and then inserts it at the beginning of the element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
      $('p').prepend($('<span><i>New list item appended...</i></span>'));
    })
  });
</script>
</head>
<body>
<p>Paragraph element.</p>
<button>Click to add</button>
</body>
</html>

After clicking the button, it inserts the at the beginning of the element.

Example 4

In this example, we are passing a callback function as an argument to the prepend() method. This function will be executed when prepend() is called, and it inserts the span element at the beginning of the paragraph element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
      $('p').prepend(function(){
        return '<span><i>New list item appended...</i></span>';
      });
    })
  });
</script>
</head>
<body>
<p>Paragraph element.</p>
<button>Click to add</button>
</body>
</html>

When the button is clicked, the new span element will inserted at the beginning of the paragraph element.

jquery_ref_html.htm

Print Page