क्या जावास्क्रिप्ट / JQuery में HTML तत्व वस्तुओं को क्लोन करना संभव है?

Question

मैं अपनी समस्या को हल करने के लिए कुछ युक्तियों की तलाश कर रहा हूं।

मेरे पास एक तालिका में एक html तत्व (जैसे चयन बॉक्स इनपुट फ़ील्ड) है। अब मैं ऑब्जेक्ट को कॉपी करना चाहता हूं और कॉपी से एक नया उत्पन्न करता हूं, और वह जावास्क्रिप्ट या jQuery के साथ। मुझे लगता है कि यह किसी तरह काम करना चाहिए, लेकिन मैं इस समय थोड़ा सा क्लूलेस हूं।

कुछ इस तरह (छद्म कोड):

oldDdl = $("#ddl_1").get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

Comments

stackoverflow.com/search?q=jquery+copy+element+content में संबंधित प्रश्नों का एक समूह है।

— फेलिक्स क्लिंग

Answer 1

अपने कोड का उपयोग करके आप क्लोन जावास्क्रिप्ट () विधि का उपयोग करके सादे जावास्क्रिप्ट में ऐसा कुछ कर सकते हैं :

// Create a clone of element with id ddl_1:
let clone = document.querySelector('#ddl_1').cloneNode( true );

// Change the id attribute of the newly created element:
clone.setAttribute( 'id', newId );

// Append the newly created element on element p 
document.querySelector('p').appendChild( clone );

या jQuery क्लोन () विधि का उपयोग कर (सबसे कुशल नहीं):

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want

Comments

जब आप कोई तत्व क्लोन करते हैं तो आईडी को संशोधित करना बहुत महत्वपूर्ण है।

— ड्रैगोस डर्लट

Answer 2

देशी जावास्क्रिप्ट के साथ:

newelement = element.cloneNode(bool)

जहां बूलियन इंगित करता है कि बच्चे के नोड्स को क्लोन करना है या नहीं।

यहाँ MDN पर पूरा प्रलेखन है ।

Comments

सबसे बढ़िया उत्तर। जहां आपको इसकी आवश्यकता नहीं है वहां jquery का उपयोग करें।

— लूश

अच्छा लग रहा है ... लेकिन ब्राउज़र संगतता आज की तरह संदिग्ध है।

— अनिकेत सूर्यवंशी

@AniketSuryavanshi मुझे विशेष रूप से 4 फरवरी के बारे में निश्चित नहीं है, लेकिन संगतता आज बिल्कुल सही लगती है

आईडी और नामों की नकल की जाएगी। आईडी बदली जानी चाहिए, COULD नाम छोड़ दिए जाएंगे क्योंकि वे डुप्लिकेट नाम अपेक्षित हैं।

— przemo_li

बहुत बुरा आप सभी विशेषताओं को खो देते हैं: /

— पीटर डी

Answer 3

हां, आप एक तत्व के बच्चों को कॉपी कर सकते हैं और उन्हें दूसरे तत्व में चिपका सकते हैं:

var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');

foo1.html(foo2.children().clone());

प्रमाण: http://jsfiddle.net/de9kc/

Comments

डुप्लिकेट आईडी आपके दृष्टिकोण के साथ एक समस्या होगी

— przemo_li

Answer 4

यह वास्तव में jQuery में बहुत आसान है:

$("#ddl_1").clone().attr("id",newId).appendTo("body");

.AppendTo () बदलें ...

Answer 5

आप प्रतिलिपि बनाने के लिए क्लोन () विधि का उपयोग कर सकते हैं ।

$('#foo1').html( $('#foo2 > div').clone())​;

यहाँ क्लिक करें

Answer 6

इसे इस्तेमाल करे:

$('#foo1').html($('#foo2').children().clone());

Answer 7

एक पंक्ति में:

$('#selector').clone().attr('id','newid').appendTo('#newPlace');

Comments

मुझे नहीं लगता कि यह आपकी विशेषता मान के रूप में मदद करेगा एक स्ट्रिंग है जो नहीं बदलेगी।

— जॅमी आर रिटलेवस्की

Answer 8

आपको अपने चयनकर्ता के रूप में "# foo2" का चयन करना होगा। फिर, इसे html () के साथ प्राप्त करें।

यहाँ HTML है:

<div id="foo1">

</div>
<div id="foo2">
    <div>Foo Here</div>
</div>​

यहाँ जावास्क्रिप्ट है:

$("#foo2").click(function() {
    //alert("clicked");
    var value=$(this).html();
    $("#foo1").html(value);
});​

यहाँ jsfiddle है: http://jsfiddle.net/fritzdenim/DhCjf/