jQuery .prependTo(): Insert Content as the First Child

.prependTo() inserts content as the target’s first child. It can create new content from HTML or move an existing element to that position.

Syntax and behavior

$(content).prependTo(target);

This is useful for placing a newly created item at the beginning of a list. Select or create the content before the method, then pass the destination as its argument. The Document Object Model (DOM) is the browser’s tree of document nodes. This method inserts inside the target, rather than creating a sibling outside it. The returned jQuery object contains the inserted elements, so a chained method operates on them.

The official jQuery .prependTo() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery prependTo example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<ul id="list"><li>Existing item</li></ul>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("<li>New item</li>").prependTo("#list");
      $("#output").text($("#list").children().map(function () { return $(this).text(); }).get().join(" / "));
    });
  </script>
</body>
</html>

Expected result

Opening the file inserts the new content once. The result paragraph shows New item / Existing item. In the browser’s Elements panel, check that the new li is a child of the list. Reloading the file starts again from the original markup.

Moving an existing element

$("#existing").prependTo("#destination");

Use this snippet in a document containing #existing and #destination. With one destination, the existing node changes position or parent. Inspect the live DOM rather than the original page source to see the change.

Inserting input as plain text

const userText = "<Help text>";
$("<li>").text(userText).prependTo("#list");

Replace the insertion line in the complete example with this snippet. The angle brackets appear as text. To undo the insertion, select only the newly added item and call .remove(), keeping the existing content outside that selection.

Important details and troubleshooting

• Inserting an existing element into one destination moves the original node rather than copying it. Use .clone() before insertion if the original must remain in place.
• With multiple destinations, jQuery creates copies for every destination except the last, which receives the original. Avoid cloning an id into several places; use classes or unique IDs.
• If no destination matches, no inserted content appears in the document. Check the selector and when the script runs. A click handler that inserts content will add another item on each click.
• Do not build HTML strings from untrusted input. This can introduce cross-site scripting (XSS). Create an element and use .text() to insert user-provided text without interpreting it as markup.

Compare the behavior with .prepend() inside insertion, .appendTo() with content first.