किसी Element के अंदर Content Insert करना
$(selector).append(content);
$(selector).prepend(content);append()
append() method नए content को selected element के अंदर आख़िरी child के रूप में insert करता है, पहले से मौजूद किसी भी content के बाद। यह किसी मौजूदा container के अंत में नए rows, list items, या messages जोड़ने का standard तरीका है।
उदाहरण: append()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<script>
$("#list").append("<li>Item 2</li>");
</script>
</body>
</html>prepend()
prepend() किसी element के बिल्कुल शुरू में content जोड़ता है, उसके किसी भी मौजूदा children से पहले। इसे तब इस्तेमाल करें जब नए items -- जैसे किसी chat feed में सबसे नया message -- को आख़िर में नहीं बल्कि पहले दिखना हो।
उदाहरण: prepend()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<script>
$("#list").prepend("<li>Item 0</li>");
</script>
</body>
</html>मौजूदा Elements Append करना
append() सिर्फ नया markup insert करने के बजाय किसी मौजूदा element को एक नई position में move भी कर सकता है। क्योंकि एक DOM element एक समय में सिर्फ एक जगह मौजूद हो सकता है, इसे कहीं और append करना automatically इसे उसके पुराने parent से detach कर देता है।
उदाहरण: Append Existing Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="a"><p id="moveMe">Move me</p></div>
<div id="b"></div>
<script>
$("#b").append($("#moveMe"));
</script>
</body>
</html>Text और HTML Append करना
append() plain text या पूरी HTML strings insert कर सकता है, और jQuery insert करने से पहले HTML strings को असली elements में parse करता है। यह हर element को manually बनाए बिना markup के छोटे टुकड़े जल्दी बनाना आसान बना देता है।
उदाहरण: Append Text and HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"></div>
<script>
$("#box").append("<strong>Bold</strong> text");
</script>
</body>
</html>एक List बनाना
Appending नए list items को एक बार में एक जोड़ने के लिए खासतौर पर उपयोगी है, जैसे हर बार user के task जोड़ने पर किसी ul पर एक नया li push करना। एक loop के साथ combined, यह dynamic lists render करने के लिए एक common pattern है।
उदाहरण: Build a List
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="tasks"></ul>
<script>
const tasks = ["Buy milk", "Walk dog"];
tasks.forEach(function(task) {
$("#tasks").append("<li>" + task + "</li>");
});
</script>
</body>
</html>- unclosed या invalid HTML वाली एक string append करना, जैसे
"<li>Item 2", जिसे browser फिर unpredictably repair करता है। .append()और.prepend()को mix up करना, इसलिए नए items अंत में आ जाते हैं जब आप उन्हें पहले चाहते थे।- पहले से मौजूद किसी element को
.append()को pass करना और एक copy की उम्मीद करना; यह अपनी पुरानी position से move हो जाता है, इसलिए copy के लिए.clone()इस्तेमाल करें।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: