← Back to jQuery Course | Chapter 5: DOM Manipulation | Lesson 4 of 9

Inserting Content Inside Elements

append() adds content at the end of an element.

In this page:

  1. append()
  2. prepend()
  3. Append Existing Elements
  4. Append Text and HTML
  5. Build a List
Syntax
javascript 
$(selector).append(content);
$(selector).prepend(content);

append()

The append() method inserts new content as the last child inside the selected element, after any content already there. It's the standard way to add new rows, list items, or messages to the end of an existing container.

Example: append()

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Append Item</button><button id="resetBtn" class="secondary">Reset</button>
  <ul id="list" class="stage" data-label="#list"><li>Item 1</li></ul>
  <div id="output"></div>
  <script>
    var orig = $("#list").html();
    var n = 1;
    $("#runBtn").click(function () {
      n++;
      $("#list").append("<li class='fresh'>Item " + n + "</li>");
      $("#list li").not(":last").removeClass("fresh");
      $("#output").text("append() added Item " + n + " to the END of the list (" + $("#list li").length + " items)");
    });
    $("#resetBtn").click(function () {
      n = 1;
      $("#list").html(orig);
      $("#output").text("");
    });
  </script>
</body>
</html>

prepend()

prepend() adds content at the very beginning of an element, before any of its existing children. Use it when new items -- like the newest message in a chat feed -- need to appear first instead of last.

Example: prepend()

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Prepend Item</button><button id="resetBtn" class="secondary">Reset</button>
  <ul id="list" class="stage" data-label="#list"><li>Item 1</li></ul>
  <div id="output"></div>
  <script>
    var orig = $("#list").html();
    var n = 1;
    $("#runBtn").click(function () {
      n--;
      $("#list").prepend("<li class='fresh'>Item " + n + "</li>");
      $("#list li").not(":first").removeClass("fresh");
      $("#output").text("prepend() added Item " + n + " to the START of the list (" + $("#list li").length + " items)");
    });
    $("#resetBtn").click(function () {
      n = 1;
      $("#list").html(orig);
      $("#output").text("");
    });
  </script>
</body>
</html>

Append Existing Elements

append() can move an existing element into a new position rather than just inserting fresh markup. Since a DOM element can only exist in one place at a time, appending it elsewhere automatically detaches it from its old parent.

Example: Append Existing Elements

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Move "Move me"</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="a" class="box"><span class="label">Box A</span><p id="moveMe" class="item">Move me</p></div>
  <div id="b" class="box"><span class="label">Box B</span></div>
  <div id="output"></div>
  <script>
    var orig = $("#a, #b").map(function () { return this.innerHTML; }).get();
    $("#runBtn").click(function () {
      var target = $("#moveMe").parent().attr("id") === "a" ? "#b" : "#a";
      $(target).append($("#moveMe"));
      $("#moveMe").addClass("fresh");
      $("#output").text("append() MOVED the existing element into " + (target === "#b" ? "Box B" : "Box A") + " (it was not copied)");
    });
    $("#resetBtn").click(function () {
      $("#a").html(orig[0]);
      $("#b").html(orig[1]);
      $("#output").text("");
    });
  </script>
</body>
</html>

Append Text and HTML

append() can insert plain text or full HTML strings, and jQuery parses HTML strings into real elements before inserting them. This makes it easy to build small chunks of markup on the fly without manually creating each element.

Example: Append Text and HTML

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Append Text and HTML</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="box" class="stage" data-label="#box (starts empty)"></div>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      $("#box").append("<strong>Bold</strong> text");
      $("#output").text("#box now contains: " + $("#box").html());
    });
    $("#resetBtn").click(function () {
      $("#box").empty();
      $("#output").text("");
    });
  </script>
</body>
</html>

Build a List

Appending is especially useful for adding new list items one at a time, such as pushing a new li onto a ul each time a user adds a task. Combined with a loop, it's a common pattern for rendering dynamic lists.

Example: Build a List

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <input type="text" id="taskInput" placeholder="New task"><button id="addBtn">Add Task</button><button id="resetBtn" class="secondary">Reset</button>
  <ul id="tasks" class="stage" data-label="#tasks"></ul>
  <div id="output"></div>
  <script>
    function addTask() {
      var text = $.trim($("#taskInput").val());
      if (!text) {
        $("#output").text("Type a task first");
        return;
      }
      $("#tasks li").removeClass("fresh");
      $("#tasks").append($("<li class='fresh'>").text(text));
      $("#taskInput").val("").focus();
      $("#output").text("Added \"" + text + "\" - " + $("#tasks li").length + " task(s)");
    }
    $("#addBtn").click(addTask);
    $("#taskInput").on("keydown", function (e) { if (e.key === "Enter") addTask(); });
    $("#resetBtn").click(function () {
      $("#tasks").empty();
      $("#taskInput").val("");
      $("#output").text("");
    });
  </script>
</body>
</html>
Related Topics

Inserting Content Outside Elements · Removing and Detaching Elements · Replacing Elements · Wrapping and Unwrapping Elements

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Appending a string with unclosed or invalid HTML, such as "<li>Item 2", which the browser then repairs unpredictably.
  2. Mixing up .append() and .prepend(), so new items land at the end when you wanted them first.
  3. Passing an element that already exists to .append() expecting a copy; it is moved from its old position, so use .clone() for a copy.
🔒

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson Reading and Modifying Properties Next Lesson → Inserting Content Outside Elements

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.