prepend()

The jQuery prepend() function is a method used to insert content at the beginning of the selected elements in the Document Object Model (DOM). This function is part of the jQuery library, a popular JavaScript toolkit used for simplifying HTML DOM tree traversal and manipulation, event handling, and animation.

prepend() is used to insert specified content as the first child of each element in the jQuery collection of matched elements. The syntax is as follows:

$(selector).prepend(content)
  • selector - jQuery selector that identifies the elements to which the new content is prepended
  • content - content to be inserted, can be HTML strings, DOM elements, jQuery objects or even functions that return content.

An example may be inserting a text node which inserts "Hello" at the beginning of the element with the ID myDiv:

$('#myDiv').prepend('Hello');

Or you could insert an HTML element such as inserting a new paragraph at the beginning of myDiv:

$('#myDiv').prepend('<p>New Paragraph</p>');

Similar to other jQuery methods, prepend() can handle script tags and event handlers in the content being added. However, this should be done with caution to avoid potential security risks like Cross-Site Scripting (XSS).