DOM Elements को Clone करना
In this page:
var copy = $(selector).clone();
var deepCopy = $(selector).clone(true);Basic clone()
basic clone() method किसी attached event handlers को copy किए बिना selected element और उसके descendants की एक deep copy बनाता है। copy तब तक पूरी तरह independent element है जब तक आप इसे DOM में कहीं insert नहीं करते।
उदाहरण: Basic clone()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Original</div>
<script>
const $copy = $("#box").clone();
$("body").append($copy);
</script>
</body>
</html>कई Elements को Clone करना
clone() सिर्फ एक ही नहीं, matching elements के पूरे collection को एक साथ copy कर सकता है, independent copies का एक parallel set produce करते हुए। हर clone अलग है, इसलिए बाद में एक को modify करना दूसरों को असर नहीं करता।
उदाहरण: Clone Multiple Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">One</p><p class="item">Two</p>
<script>
const $copies = $(".item").clone();
$("body").append($copies);
</script>
</body>
</html>Events के साथ Clone करना
सिर्फ markup ही नहीं, original element से bound किसी भी event handlers और jQuery data को भी copy करने के लिए clone() को true pass करें। उस argument के बिना, एक cloned button बिल्कुल एक जैसा दिखेगा लेकिन clicks को उसी तरह respond नहीं करेगा।
उदाहरण: Clone with Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$("#btn").on("click", function() { console.log("Clicked"); });
const $copy = $("#btn").clone(true);
$("body").append($copy);
</script>
</body>
</html>Clone करके Modify करना
clone करने के बाद, आप original element को बिल्कुल भी बदले बिना copy का text, attributes, या classes freely बदल सकते हैं, क्योंकि अब दोनों पूरी तरह अलग DOM nodes हैं। किसी template element को duplicate करके हर copy को customize करने का यह एक common तरीका है।
उदाहरण: Clone and Modify
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="template">Template</div>
<script>
const $copy = $("#template").clone();
$copy.text("Modified copy").attr("id", "copy1");
$("body").append($copy);
</script>
</body>
</html>Forms को Clone करना
Cloning inputs और selects जैसे simple form controls को भी duplicate कर सकता है, हालांकि सावधानी ज़रूरी है क्योंकि cloned inputs आमतौर पर original जैसा ही name और id रखते हैं, जिसे आपको page पर duplicate identifiers से बचने के लिए बदलना होगा।
उदाहरण: Clone Forms
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field1" name="field1" value="Original">
<script>
const $copy = $("#field1").clone();
$copy.attr("id", "field2").attr("name", "field2");
$("body").append($copy);
</script>
</body>
</html>- एक
idवाले element को clone करना और copy को append करना, जो page में duplicate ids बनाता है। - यह उम्मीद करना कि
.clone()click handlers copy करेगा, जबकि उनके लिए आपको.clone(true)चाहिए। .clone()call करना और copy को insert करना भूल जाना, जैसे$("#box").clone();, क्योंकि जब तक आप इसे append नहीं करते clone document में नहीं है।
- jQuery elements का text, HTML, और values get और set करता है, और attributes व properties पढ़ता और बदलता है।
- आप elements के अंदर या बाहर content insert कर सकते हैं, और उन्हें remove, detach, या replace कर सकते हैं।
- Elements को wrap, unwrap, और clone करना DOM को restructure करता है।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: