jQuery .insertAfter(): Insert Content as the Next Sibling

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

Syntax and behavior

$(content).insertAfter(target);

This is useful for inserting a new paragraph after a chosen target. 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. The inserted element shares a parent with the target; it is not placed inside the target. The returned jQuery object contains the inserted elements, so a chained method operates on them.

The official jQuery .insertAfter() 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 insertAfter 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 () {
      $("<p class='new'>New paragraph</p>").insertAfter("#target");
      $("#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 Target paragraph / New 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

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

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.