append and prepend

append and prepend: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 13 of 100

append and prepend

Setup & DOM → Events Effects AJAX → Perf & Integrate → Ship & Projects

Setup & DOM · 1 — Select · ~6 min · DOM Updates

What is this?

append() inserts content as the last child; prepend() inserts as the first child. You can pass HTML strings, DOM nodes, or jQuery objects.

Why should you care?

Live feeds and activity lists in QueryVerse grow from the top or bottom without replacing the whole panel.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <ul id="log" class="box">
    <li>Seed event</li>
  </ul>
  <button type="button" id="append">append</button>
  <button type="button" id="prepend">prepend</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  var n = 1;
  $('#append').on('click', function () {
    n += 1;
    $('#log').append($('<li/>').text('Appended #' + n));
  });
  $('#prepend').on('click', function () {
    n += 1;
    $('#log').prepend($('<li/>').text('Prepended #' + n));
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <ul id="log" class="box">
    <li>Seed event</li>
  </ul>
  <button type="button" id="append">append</button>
  <button type="button" id="prepend">prepend</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  var n = 1;
  $('#append').on('click', function () {
    n += 1;
    $('#log').append($('<li/>').text('Appended #' + n));
  });
  $('#prepend').on('click', function () {
    n += 1;
    $('#log').prepend($('<li/>').text('Prepended #' + n));
  });
});
</script>
</body>
</html>

Result