jQuery .before(): Insert Content as the Previous Sibling

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

Syntax and behavior

$(target).before(content);

This is useful for adding a notice immediately before its target. Select the destination before the method, then pass an HTML string, DOM element, or jQuery object as the content. You can pass additional content arguments or use a function to generate content separately for each destination. The Document Object Model (DOM) is the browser’s tree of document nodes. The inserted element shares a parent with the target; it is not placed inside the target. The returned jQuery object contains the destinations, so subsequent chained methods still operate on those destinations.

The official jQuery .before() 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 before 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>
<div id="container"><p id="target">Target paragraph</p></div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#target").before("<p class='new'>New paragraph</p>");
      $("#output").text($("#container").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 paragraph / Target paragraph. In the browser’s Elements panel, check that the new paragraph and the target have the same parent. Reloading the file starts again from the original markup.

Moving an existing element

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

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>";
$("#target").before($("<p>").text(userText));

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 .after() sibling insertion, .insertBefore() with content first.