Elements को Replace करना
In this page:
$(selector).replaceWith(newContent);
$(newContent).replaceAll(target);replaceWith()
replaceWith() method selected element को पूरी तरह नए content से swap कर देता है, original को DOM से हटाते हुए। replacement exact position लेता है जो original element occupy करता था।
उदाहरण: replaceWith()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="old">Old content</span>
<script>
$("#old").replaceWith("<div>New content</div>");
</script>
</body>
</html>replaceAll()
replaceAll() replaceWith() के उल्टे तरीके से काम करता है: आप इसे नए content पर call करते हैं और target elements को replace करने के लिए एक selector pass करते हैं जिन्हें replace करना है। यह functionally equivalent है, बस caller और argument reversed हैं।
उदाहरण: replaceAll()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="old">Old content</span>
<script>
$("<div>New content</div>").replaceAll("#old");
</script>
</body>
</html>मौजूदा Element से Replace करना
कोई replacement एक fresh HTML string के बजाय एक मौजूदा DOM element इस्तेमाल कर सकता है, इस स्थिति में वह element clone होने के बजाय नई position में move हो जाता है। क्योंकि elements दो जगह मौजूद नहीं हो सकते, moved element की original position खाली रह जाती है।
उदाहरण: Replace with Existing Element
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="template">Template</div>
<span id="old">Old</span>
<script>
$("#old").replaceWith($("#template"));
</script>
</body>
</html>Text Replace करना
किसी element को replace करना उसकी structure को भी पूरी तरह बदल सकता है, सिर्फ उसका text नहीं -- उदाहरण के लिए, एक span को अलग children वाले पूरे div से बदलना। यह सिर्फ text content बदलने से अलग है, क्योंकि खुद element type बदल जाता है।
उदाहरण: Replace Text
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span id="badge">Info</span>
<script>
$("#badge").replaceWith("<div class='alert'>Warning: check this</div>");
</script>
</body>
</html>सावधानी से Replace करना
किसी element को replace करना पुराने element और उसके event handlers को permanently हटा देता है, इसलिए सीधे उससे bound कोई भी listeners काम करना बंद कर देते हैं। अगर आपको किसी replace के आर-पार behavior preserve करना है, तो swap के बाद नए content पर handlers दोबारा bind करें।
उदाहरण: Replacing Carefully
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="old">Old Button</button>
<script>
const $new = $("<button id='old'>New Button</button>");
$new.on("click", function() { console.log("Rebinding works"); });
$("#old").replaceWith($new);
</script>
</body>
</html>.replaceAll()के लिए order mix up करना,$("#old").replaceAll("<div>New</div>")लिखना जब नया content पहले आता है:$("<div>New</div>").replaceAll("#old")।.replaceWith()के बाद पुराने element के लिए एक variable रखे रहना और उसे इस्तेमाल करना, जबकि पुराना element अब DOM में नहीं है।- एक copy की उम्मीद में
.replaceWith()को एक मौजूदा element pass करना, जबकि वह element अपनी पिछली जगह से move हो जाता है।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: