Theory
Event number 41 arrives at runtime
Mid-fest, the committee adds a surprise event: Antakshari Finals. The page is already loaded in 200 students' browsers; the list must grow a new card now, from script, without a reload.
Last lesson's setters cannot do this: text() and html() REPLACE what an element holds. Today's methods insert: new content into, before, after and around what already exists. Five methods, and the whole trick is knowing which side of the element each one lands on.
Theory
Inside the box, or beside it?
Think of an event card as a box on a shelf.
append drops a note INTO the box, at the bottom of its contents; prepend drops it in at the top. The box's contents grew.
before places a new box on the shelf to its LEFT; after, to its RIGHT. The shelf grew, the box untouched.
wrap lifts the box and puts it inside a bigger gift box of its own. Inside, beside, around: that is the entire lesson's map.
At a glance
The 5 insert methods
| Method | Where the new content lands | FestConnect use |
|---|---|---|
| append(c) | INSIDE, as the last child | New card at the list's end |
| prepend(c) | INSIDE, as the first child | NEW badge at a card's top |
| before(c) | OUTSIDE, previous sibling | Sold-out banner above a card |
| after(c) | OUTSIDE, next sibling | Sponsor strip below a card |
| wrap(c) | AROUND: each match gets its own new parent | Highlight frame per featured card |
Practical
The list grows live (complete page)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#addBtn").click(function() {
$("#eventList").append( // INSIDE, at the end
"<li class='card'>Antakshari Finals</li>");
$("li:last").prepend("<b>NEW </b>"); // INSIDE that card, at start
$("#garba").before( // OUTSIDE, above
"<p class='soldout'>SOLD OUT</p>");
$(".featured").wrap( // AROUND each match
"<div class='highlight'></div>");
});
});
</script>
</head>
<body>
<button id="addBtn">Committee update</button>
<ul id="eventList">
<li id="garba" class="card featured">Garba Night</li>
<li class="card">Coding Contest</li>
<li class="card featured">Robo Race</li>
</ul>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
What is the difference between $("#garba").append(x) and $("#garba").after(x)?
- None: both add x at the end of #garba
- append puts x INSIDE #garba as its last child; after puts x OUTSIDE as its next sibling
- append adds at the start, after adds at the end
- after replaces #garba's next sibling; append replaces its content
Show the answer
append puts x INSIDE #garba as its last child; after puts x OUTSIDE as its next sibling
The boundary is the element's own closing tag: append lands just inside it (the card's content grows), after lands just past it (the LIST grows a new item beside the card). Visually similar in simple layouts, structurally different, and structure decides inheritance of styles and containment in the DOM tree. Option C confuses append with prepend on one side and after with... nothing on the other. Option D smuggles in replacement: every method today INSERTS; nothing existing is touched. Inside-vs-outside is the one distinction this family is examined on.
Think first
How many highlight boxes?
The listing runs $(".featured").wrap("<div class='highlight'></div>") with 2 featured cards matched. Before tapping: does jQuery build ONE highlight div holding both cards, or something else?
Show the answer
Two separate divs: wrap gives EACH matched element its own copy of the wrapper, so each featured card sits in a personal highlight frame, wherever it lives in the list. (One shared box around the whole group is a different method, wrapAll, outside this syllabus but worth a note in the margin.) This per-element behaviour is consistent with everything in the unit: multi-element selections apply the action to every match individually: 2 cards, 2 wraps, exactly like 20 cards, 20 click handlers.
Watch out
Insert-family fine print
text() does not belong here: the slug lists it, but text("x") REPLACES content (last lesson); it inserts nothing alongside. Know it as the odd name out.
Appending to the wrong parent: $("#eventList li").append(card) would put a card inside EVERY existing li; the new list item's parent is the ul itself.
Strings become real elements: once appended, the new li is a full DOM citizen: selectable, clickable, effectable, exactly like its born-in-HTML siblings.
Theory
This is how feeds work
Every infinite scroll, chat window and live scoreboard you have used is this lesson in a loop: data arrives, a string is built, append fires, the page grows. In Unit 4 the arriving data will come from the server via AJAX, and the handler's last line will be exactly today's append. One family remains to complete the manipulation toolkit: taking things OUT: remove, empty and unwrap, next.
Summary
Key takeaways
- Inside: append (last child) and prepend (first child) grow an element's content.
- Outside: before (previous sibling) and after (next sibling) grow the layout around it.
- wrap gives EACH matched element its own new parent; 2 matches = 2 wrappers.
- HTML strings inserted become real, fully selectable DOM elements.
- text() replaces rather than inserts: it belongs to the get/set family.
- Multi-element selections insert at every match.
- Memory hook: append/prepend fill the box, before/after extend the shelf, wrap adds a gift box.