किसी Element के बाहर Content Insert करना
$(selector).before(content);
$(selector).after(content);after()
after() method नए content को selected element के अंदर के बजाय उसके तुरंत बाद एक sibling के रूप में insert करता है, इसके बाहर। append() के उलट, नया content parent की child list में एक sibling बन जाता है, selected element का खुद का child नहीं।
उदाहरण: after()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="ref">Reference</p>
<script>
$("#ref").after("<p>After content</p>");
</script>
</body>
</html>before()
before() content को selected element से तुरंत पहले एक preceding sibling के रूप में insert करता है। यह after() का mirror image है, तब उपयोगी जब नए content को किसी मौजूदा element के बाद के बजाय पहले दिखना हो।
उदाहरण: before()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="ref">Reference</p>
<script>
$("#ref").before("<p>Before content</p>");
</script>
</body>
</html>मौजूदा Elements Insert करना
after() और before() मौजूदा elements को DOM में एक नई position पर move कर सकते हैं, बिल्कुल जैसे append() और prepend() कर सकते हैं। इस तरह किसी element को move करना automatically इसे उसकी पिछली location से हटा देता है।
उदाहरण: Insert 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>
<p id="ref">Reference</p>
<script>
$("#ref").after($("#moveMe"));
</script>
</body>
</html>Messages जोड़ना
ये methods मौजूदा content के आस-पास notices जोड़ने के लिए उपयोगी हैं, जैसे किसी invalid input field के तुरंत बाद एक validation error message insert करना। message को एक sibling के रूप में रखना इसे उस element से visually और structurally जुड़ा रखता है जिससे यह related है।
उदाहरण: Add Messages
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="email" type="text">
<script>
$("#email").after("<span class='error'>Invalid email</span>");
</script>
</body>
</html>Position मायने रखता है
before() content को document order में किसी element से पहले रखता है; after() इसे तुरंत बाद रखता है। क्योंकि दोनों element के अंदर के बजाय बाहर insert करते हैं, वे सिर्फ उन elements पर काम करते हैं जिनका पहले से एक parent है जिससे sibling attach हो सके।
उदाहरण: Position Matters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="ref">Reference</p>
<script>
$("#ref").before("<p>Before</p>").after("<p>After</p>");
</script>
</body>
</html>- जब आपको एक sibling चाहिए था तब
.append()इस्तेमाल करना, इसलिए$("#ref").append("<p>...</p>")paragraph को#refके बाद के बजाय उसके अंदर डाल देता है। .before()और.after()को confuse करना, नए element को reference के गलत तरफ़ रखते हुए।- किसी ऐसे selector पर
.after()call करना जो किसी से भी match नहीं करता, जो कुछ नहीं करता और कोई error नहीं देता।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: