Theory
Event Number 41 Runtime पर आता है
Fest के बीच में, committee एक surprise event add करती है: Antakshari Finals। Page पहले से 200 students के browsers में loaded है; list को अभी, script से, बिना reload एक नया card grow करना ज़रूरी है।
पिछले lesson के setters यह नहीं कर सकते: text() और html() जो element hold करता है उसे REPLACE करते हैं। आज के methods insert करते हैं: नया content पहले से exist कर रही चीज़ में, इसके पहले, बाद और चारों तरफ़। पाँच methods, और पूरी trick यह जानना है कि हर एक element के किस तरफ़ land होता है।
Theory
Box के अंदर, या इसके बगल?
एक event card को एक shelf पर एक box समझिए।
append एक note को box के अंदर, इसके contents के नीचे DROP करता है; prepend इसे ऊपर drop करता है। Box के contents बढ़े।
before shelf पर इसके LEFT में एक नया box रखता है; after, RIGHT में। Shelf बढ़ी, box untouched।
wrap box को उठाता है और इसे इसके अपने एक बड़े gift box के अंदर रखता है। Inside, beside, around: यही पूरे lesson का map है।
At a glance
5 Insert Methods
| Method | नया Content कहाँ Land होता है | FestConnect Use |
|---|---|---|
| append(c) | INSIDE, last child की तरह | List के आख़िर में नया card |
| prepend(c) | INSIDE, first child की तरह | एक card के top पर NEW badge |
| before(c) | OUTSIDE, previous sibling | एक card के ऊपर sold-out banner |
| after(c) | OUTSIDE, next sibling | एक card के नीचे sponsor strip |
| wrap(c) | AROUND: हर match को इसका अपना नया parent मिलता है | हर featured card के लिए highlight frame |
Practical
List Live Grow होती है (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
$("#garba").append(x) और $("#garba").after(x) के बीच क्या फ़र्क है?
- कोई नहीं: दोनों x को #garba के आख़िर में add करते हैं
- append x को #garba के INSIDE इसके last child की तरह रखता है; after x को OUTSIDE इसके next sibling की तरह रखता है
- append start पर add करता है, after end पर add करता है
- after #garba के next sibling को replace करता है; append इसका content replace करता है
Show the answer
append x को #garba के INSIDE इसके last child की तरह रखता है; after x को OUTSIDE इसके next sibling की तरह रखता है
Boundary element का अपना closing tag है: append इसके अंदर just थोड़ा सा land होता है (card का content बढ़ता है), after इसे just पार करके land होता है (LIST एक नया item card के बगल में बढ़ती है)। Simple layouts में visually similar, structurally अलग, और structure DOM tree में styles और containment की inheritance decide करती है। Option C append को एक तरफ़ prepend से और after को दूसरी तरफ़... कुछ नहीं से confuse करता है। Option D replacement smuggle करता है: आज हर method INSERT करता है; कुछ भी existing touch नहीं होता। Inside-vs-outside वह एक distinction है जिस पर यह family examine होती है।
Think first
कितने Highlight Boxes?
Listing $(".featured").wrap("<div class='highlight'></div>") 2 featured cards matched के साथ run करती है। Tap करने से पहले: क्या jQuery ONE highlight div बनाता है जो दोनों cards hold करे, या कुछ और?
Show the answer
Two separate divs: wrap हर matched element को wrapper की अपनी copy देता है, तो हर featured card एक personal highlight frame में बैठता है, चाहे यह list में कहीं भी रहता हो। (पूरे group के आस-पास एक shared box एक अलग method है, wrapAll, इस syllabus से बाहर पर margin में एक note के लायक।) यह per-element behaviour unit की हर चीज़ के साथ consistent है: multi-element selections action को हर match पर individually apply करती हैं: 2 cards, 2 wraps, exactly 20 cards, 20 click handlers की तरह।
Watch out
Insert-Family की Fine Print
text() यहाँ Belong नहीं करता: slug इसे list करता है, पर text("x") content REPLACE करता है (पिछला lesson); यह बगल में कुछ insert नहीं करता। इसे odd name out की तरह जानिए।
ग़लत Parent में Append करना: $("#eventList li").append(card) एक card को हर EXISTING li के अंदर रखेगा; नए list item का parent खुद ul है।
Strings असली Elements बन जाती हैं: एक बार appended होने पर, नया li एक पूरा DOM citizen है: selectable, clickable, effectable, exactly इसके born-in-HTML siblings की तरह।
Theory
Feeds ऐसे ही काम करते हैं
हर infinite scroll, chat window और live scoreboard जो आपने इस्तेमाल किया है यही lesson एक loop में है: data आता है, एक string बनती है, append fire होता है, page बढ़ता है। Unit 4 में आने वाला data AJAX के ज़रिए server से आएगा, और handler की आख़िरी line exactly आज का append होगी। Manipulation toolkit पूरा करने के लिए एक family बाकी है: चीज़ों को OUT निकालना: remove, empty और unwrap, अगला।
Summary
Key takeaways
- Inside: append (last child) और prepend (first child) एक element का content बढ़ाते हैं।
- Outside: before (previous sibling) और after (next sibling) इसके चारों तरफ़ layout बढ़ाते हैं।
- wrap हर matched element को इसका अपना नया parent देता है; 2 matches = 2 wrappers।
- Insert होने वाली HTML strings असली, पूरी तरह selectable DOM elements बन जाती हैं।
- text() insert करने के बजाय replace करता है: यह get/set family का है।
- Multi-element selections हर match पर insert करती हैं।
- Memory hook: append/prepend box भरते हैं, before/after shelf बढ़ाते हैं, wrap एक gift box add करता है।