एक तत्व को दूसरे तत्व में कैसे स्थानांतरित किया जाए?

1688

मैं एक DIV तत्व को दूसरे के अंदर ले जाना चाहूंगा। उदाहरण के लिए, मैं इसे स्थानांतरित करना चाहता हूं (सभी बच्चों सहित):

<div id="source">
...
</div>

इस मामले में:

<div id="destination">
...
</div>

ताकि मेरे पास यह हो:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

javascript jquery html

— मार्क रिचमैन
स्रोत

21

बस $ (target_element) .append (to_be_inserted_element) का उपयोग करें;

— मोहम्मद अरीब सिद्दीकी 20

2

या: destination.appendChild (स्रोत) सादे जावास्क्रिप्ट का उपयोग कर

— ल्यूक

क्या हम CSS का उपयोग करके इसे प्राप्त कर सकते हैं? क्या यह संभव है ?

— राजकुमार समला

6

@RajKumarSamala CSS HTML की संरचना में परिवर्तन नहीं कर सकती है, केवल इसकी प्रस्तुति।

— मार्क रिचमैन

38

कभी सादा जावास्क्रिप्ट की कोशिश की ... destination.appendChild(source);?

onclick = function(){ destination.appendChild(source); }

div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }

<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>

स्निपेट का विस्तार करें

— बेकिम बाकज
स्रोत

* किसी ने डेमो स्निपेट की वैश्विक घटना को पोस्ट में बढ़ाने के प्रयास में onclickकीवर्ड के साथ उपसर्ग किया var- लेकिन यह गलत है!

— बेकिम बकाज

6

यह आश्चर्यजनक है कि लोग अभी भी सोचते हैं कि jQuery जावास्क्रिप्ट के बराबर है। 2017 में अब jQuery के लिए कोई ज़रूरत नहीं है, वास्तव में।

— nkkollaw

2

2017 में jquery की कोई आवश्यकता नहीं है, लेकिन कभी-कभी यह कुछ हल्का और इसी तरह के कार्यों का उपयोग करने में मदद करता है जो आप खुद को हर एक परियोजना में बार-बार कर रहे हैं। मैं डॉक्युमेंट को देखने के लिए एक आसान तरीका के रूप में कैश-डोम का उपयोग करता हूं। क्रॉस-ब्राउज़र फ्रेंडली तरीके से window.load इवेंट। बहुत आसान।

— eballeste

1

इसे स्वीकार किए गए उत्तर में बदल दिया, अब जब कि यह 2020 है:

— मार्क रिचमैन

1

यह आश्चर्यजनक है कि लोग अभी भी सोचते हैं कि jQuery जावास्क्रिप्ट के बराबर है। अब वास्तव में 2020 में jQuery के लिए कोई ज़रूरत नहीं है।

— ii iml0sto1

1793

आप appendToफ़ंक्शन का उपयोग करना चाहते हैं (जो तत्व के अंत में जोड़ता है):

$("#source").appendTo("#destination");

वैकल्पिक रूप से आप prependToफ़ंक्शन का उपयोग कर सकते हैं (जो तत्व की शुरुआत में जोड़ता है):

$("#source").prependTo("#destination");

उदाहरण:

कोड स्निपेट दिखाएं

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

स्निपेट का विस्तार करें

— एंड्रयू हरे
स्रोत

23

चेतावनी है कि यह jQuery मोबाइल में सही ढंग से काम नहीं कर सकता है, क्योंकि यह तत्व की एक और प्रति बना सकता है।

— जॉर्डन रेइटर

32

क्या appenTo एक प्रति बनाता है या वास्तव में पूरे div को गंतव्य पर ले जाता है? (क्योंकि अगर यह कॉपी करता है, तो यह आईडी द्वारा डिव को कॉल करते समय

50

यहाँ jQuery में तत्वों को हटाने, बदलने और स्थानांतरित करने पर एक उत्कृष्ट लेख दिया गया है: elated.com/articles/jquery-removing-replacing-moving-elements

— xhh

42

ध्यान दें कि appendTo के लिए jQuery के दस्तावेज़ में तत्व को स्थानांतरित किया गया है: it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned- api.jquery.com/appendto

— John K

15

आप इसे आगे नहीं बढ़ा रहे हैं, सिर्फ जोड़ रहे हैं। नीचे दिए गए उत्तर में उचित MOVE होता है।

— आरोन

913

मेरा समाधान:

चाल:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

कॉपी:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

.Detach () के उपयोग पर ध्यान दें। नकल करते समय, सावधान रहें कि आप आईडी की नकल नहीं कर रहे हैं।

— एलेजांद्रो इल्लेकास
स्रोत

86

सबसे बढ़िया उत्तर। स्वीकृत जवाब एक प्रति बनाता है, तत्व को स्थानांतरित नहीं करता है जैसे प्रश्न पूछता है।

— पल्सकोड १code

97

क्षमा करें, लेकिन एंड्रयू हरे का स्वीकृत उत्तर सही है - अलग होना अनावश्यक है। ऊपर पिक्सिक के JSFiddle में इसे आज़माएं - यदि आप अलग-अलग कॉल को हटाते हैं तो यह ठीक उसी तरह काम करता है, यानी यह एक चाल है, एक प्रति नहीं। यहाँ केवल एक बदलाव के साथ कांटा है: jsfiddle.net/D46y5 जैसा कि एपीआई में दर्ज़ किया गया है: api.jquery.com/appendTo : "यदि इस तरह से चयनित किसी तत्व को DOM में कहीं एक ही स्थान पर डाला गया है, तो उसे स्थानांतरित कर दिया जाएगा। लक्ष्य में (क्लोन नहीं किया गया) और सम्मिलित तत्व से मिलकर एक नया सेट वापस आ गया है "

— जॉन - नहीं, एक नंबर

8

@ जॉन-नोटन सही है - अलग करने () की यहाँ आवश्यकता नहीं है। स्वीकृत उत्तर सबसे अच्छा है, आपको केवल दस्तावेज को ठीक से पढ़ने की आवश्यकता है।

— लियोनार्डकॉलिस

11

परिशिष्ट प्रलेखन यह भी कहता है: "यदि एक से अधिक लक्ष्य तत्व हैं, तो, पहले के बाद प्रत्येक लक्ष्य के लिए सम्मिलित तत्व की क्लोन प्रतियां बनाई जाएंगी और वह नया सेट (मूल तत्व प्लस क्लोन) वापस आ जाएगा।" तो सामान्य मामले में, यह समाधान भी प्रतियां बना सकता है!

— विंसेंट पैजेलर

महान! या आप इसका उपयोग करने के लिए और अधिक विशिष्ट होने के लिए उपयोग कर सकते हैं$('#nodeToMove').insertAfter('#insertAfterThisElement');

— विक्टर ऑगस्तो

108

मैंने अभी उपयोग किया है:

$('#source').prependTo('#destination');

जिसे मैंने यहां से हड़प लिया ।

— kjc26ster
स्रोत

7

ठीक है, जब आप तत्व को पकड़ना चाहते हैं और बाद में इसे फिर से संगठित करना चाहते हैं, तो डिटैच उपयोगी है, लेकिन आपके उदाहरण में आप इसे वैसे भी तुरंत पुन: स्थापित करते हैं।

— टिम ब्यूटे

1

मुझे डर है कि मैं काफी हिल नहीं रहा हूं कि आप क्या कर रहे हैं, क्या आप नमूना कोड प्रदान कर सकते हैं?

— kjc26ster 21

1

मेरा मतलब है, prependTo, तत्व को अपनी मूल स्थिति से अलग करता है और इसे नए पर सम्मिलित करता है। दूसरी ओर टुकड़ी का कार्य केवल चयनित तत्व को अलग करता है और आप इसे बाद के समय में DOM में सम्मिलित करने के लिए एक चर में सहेज सकते हैं। बात यह है, आपका अलग कॉल अनावश्यक है। इसे निकालें और आप उसी प्रभाव को प्राप्त करेंगे।

— टिम ब्यूटे

1

अविश्वसनीय है कि संपादन ने इस उत्तर को पूरी तरह से इस बिंदु पर बदल दिया कि एक और उत्तर एक साल बाद (मूल के समान) जोड़ा गया और

— 800+ अपवोट

96

जावास्क्रिप्ट समाधान के बारे में क्या ?

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

इसकी जांच - पड़ताल करें।

— अली बसम
स्रोत

8

CreateDocumentFragment का उपयोग केवल डॉक्यूमेंट के बजाय क्यों करें ।getElementById ('गंतव्य')। appendChild (document.getElementById ('source'))?

— गनर गेसनर

6

@ GunarC.Gessner यह मानते हुए कि आपको गंतव्य ऑब्जेक्ट में जोड़ने से पहले स्रोत ऑब्जेक्ट को संशोधित करने की आवश्यकता है, तो सबसे अच्छा तरीका उस टुकड़े का उपयोग करना है जो एक काल्पनिक वस्तु है और DOM ट्री का हिस्सा नहीं है, आपको संशोधित करते समय बेहतर प्रदर्शन मिलता है स्रोत वस्तु जब इसे मूल स्थान से परिवर्तित किया गया है (अब यह टुकड़े के अंदर है) इसे संशोधित करने के बजाय इसे शुरू करने से पहले इसे प्रारंभिक स्थान पर संशोधित करें।

— अली बस्साम

5

मैं जावास्क्रिप्ट शुद्ध समाधान की पेशकश की प्रासंगिकता के लिए जोड़ना चाहता हूं। यह नहीं माना जाना चाहिए कि jQuery का हमेशा उपयोग किया जा रहा है

— अलेक्जेंडर फ्राडिएनी

1

प्रश्न: बाल नोड को जोड़ने में, क्या हम संलग्न घटनाओं को खो रहे हैं?

— जिमासुन

1

मेरे अपने प्रश्न का उत्तर हां है, यह संलग्न घटनाओं को रखता है।

— जिमासुन

95

यदि divआप अपने तत्व को जहां रखना चाहते हैं, उसमें सामग्री है, और आप चाहते हैं कि तत्व मुख्य सामग्री के बाद दिखाई दे :

  $("#destination").append($("#source"));

यदि divआप अपने तत्व को अंदर रखना चाहते हैं, तो आप मुख्य सामग्री से पहले तत्व दिखाना चाहते हैं :

$("#destination").prepend($("#source"));

यदि divआप अपना तत्व रखना चाहते हैं, तो यह खाली है, या आप इसे पूरी तरह से बदलना चाहते हैं :

$("#element").html('<div id="source">...</div>');

यदि आप उपरोक्त में से किसी एक तत्व से पहले डुप्लिकेट करना चाहते हैं:

$("#destination").append($("#source").clone());
// etc.

— sbaaaang
स्रोत

मुझे पढ़ने के लिए सभी बोल्डफेस थोड़ा मुश्किल लग रहा है, लेकिन यह सबसे अधिक जानकारीपूर्ण उत्तर है, इसलिए इसे मेरा उत्थान मिलता है।

— माइकल शेपर

32

आप उपयोग कर सकते हैं:

के बाद सम्मिलित करने के लिए,

jQuery("#source").insertAfter("#destination");

किसी अन्य तत्व के अंदर सम्मिलित करने के लिए,

jQuery("#source").appendTo("#destination");

— सुब्रह्मण्यम
स्रोत

20

यदि आप त्वरित डेमो चाहते हैं और तत्वों को स्थानांतरित करने के तरीके के बारे में अधिक जानकारी चाहते हैं, तो इस लिंक को आज़माएं:

http://html-tuts.com/move-div-in-another-div-with-jquery

यहाँ एक छोटा उदाहरण है:

एक तत्व को स्थानांतरित करने के लिए:

$('.whatToMove').insertBefore('.whereToMove');

एक तत्व को स्थानांतरित करने के लिए:

$('.whatToMove').insertAfter('.whereToMove');

एक तत्व के अंदर जाने के लिए, उस कंटेनर के अंदर सभी तत्वों को शामिल करें:

$('.whatToMove').prependTo('.whereToMove');

एक तत्व के अंदर जाने के लिए, उस कंटेनर के अंदर सभी तत्वों को पाएं:

$('.whatToMove').appendTo('.whereToMove');

— सज्जन
स्रोत

19

स्रोत को गंतव्य तक ले जाने के लिए आप निम्न कोड का उपयोग कर सकते हैं

 jQuery("#source")
       .detach()
       .appendTo('#destination');

काम कोडपेन का प्रयास करें

कोड स्निपेट दिखाएं

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}

#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>

स्निपेट का विस्तार करें

— सुबोध गुलालके
स्रोत

11

पुराना सवाल है, लेकिन यहाँ इसलिए मिला क्योंकि मुझे सभी ईवेंट श्रोताओं सहित एक कंटेनर से दूसरे कन्टैंट को स्थानांतरित करने की आवश्यकता है ।

jQuery के पास इसे करने का कोई तरीका नहीं है, लेकिन मानक DOM फ़ंक्शन appendChild करता है।

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

AppendChild का उपयोग .source को हटाता है और इसे इवेंट में शामिल करता है, जिसमें इवेंट श्रोता शामिल हैं: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

— HMR
स्रोत

6

आप भी आजमा सकते हैं:

$("#destination").html($("#source"))

लेकिन यह आपके पास मौजूद किसी भी चीज़ को पूरी तरह से अधिलेखित कर देगा #destination।

— तमस
स्रोत

2

और स्थानांतरित तत्व पर घटना श्रोताओं को तोड़ दें।

— इगोर पोमरानस्की 15

4

मैं के बीच भारी स्मृति रिसाव और प्रदर्शन अंतर पर ध्यान insertAfterऔर afterया insertBeforeऔर before.. आप डोम तत्वों के टन है, या आप का उपयोग करने की आवश्यकता है after()या before()एक अंदर MouseMove घटना , ब्राउज़र स्मृति शायद में वृद्धि होगी और अगले आपरेशन वास्तव में धीमी गति से चलेंगे।

मैंने अभी जो समाधान अनुभव किया है, वह इसके बजाय इन्सर्टबियर का उपयोग करना है before()और इसके बाद सम्मिलित करना है after()।

— Spetsnaz
स्रोत

यह एक जावास्क्रिप्ट इंजन कार्यान्वयन-निर्भर मुद्दे की तरह लगता है। आप किस ब्राउज़र संस्करण और JS इंजन के साथ इसे देखते हैं?

— मार्क रिचमैन

1

मैं Chrome संस्करण 36.0.1985.125 पर हूं और jQuery v1.11.1 का उपयोग कर रहा हूं। मैं मूसमव इवेंट पर एक फ़ंक्शन को बांधता हूं, जो माउस को खत्म करने वाले तत्व को नीचे या ऊपर करने के लिए एक सरल डीआईवी को स्थानांतरित करता है। इसलिए, जब आप अपने कर्सर को खींचते हैं तो यह ईवेंट और फ़ंक्शन चलता है। स्मृति रिसाव के बाद () और उससे पहले () के साथ होता है, यदि आप अपने कर्सर को 30sec + के लिए स्थानांतरित करते हैं, और यह गायब हो जाता है अगर मैं सिर्फ इसके बाद InsertAfter & insertBefore का उपयोग करता हूं।

— २३:१४

1

मैं उस एक पर Google के साथ एक बग खोलूंगा।

— मार्क रिचमैन

2

आप शुद्ध जावास्क्रिप्ट का उपयोग कर सकते हैं, appendChild()विधि का उपयोग कर ...

AppendChild () विधि नोड के अंतिम बच्चे के रूप में एक नोड जोड़ता है।

टिप: यदि आप टेक्स्ट के साथ एक नया पैराग्राफ बनाना चाहते हैं, तो टेक्स्ट को एक टेक्स्ट नोड के रूप में बनाना याद रखें जिसे आप पैराग्राफ में जोड़ते हैं, फिर पैराग्राफ़ को दस्तावेज़ में जोड़ें।

आप एक तत्व को दूसरे तत्व से स्थानांतरित करने के लिए भी इस विधि का उपयोग कर सकते हैं।

युक्ति: किसी निर्दिष्ट, मौजूदा, बच्चे के नोड से पहले एक नया बच्चा नोड सम्मिलित करने के लिए InsertBefore () विधि का उपयोग करें।

तो आप यह कर सकते हैं कि काम करने के लिए, यह वही है जो मैंने आपके लिए बनाया है, इसका उपयोग करते हुए appendChild(), चलाएं और देखें कि यह आपके मामले के लिए कैसे काम करता है:

function appendIt() {
  var source = document.getElementById("source");
  document.getElementById("destination").appendChild(source);
}

#source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}

button {
  margin-top: 20px;
}

<div id="source">
  <p>Source</p>
</div>

<div id="destination">
  <p>Destination</p>
</div>

<button onclick="appendIt()">Move Element</button>

स्निपेट का विस्तार करें

— एलिरेज़ा
स्रोत

0

संपूर्णता के लिए, इस लेख में एक और दृष्टिकोण wrap()या wrapAll()उल्लेख है । तो ओपी का प्रश्न संभवतः इससे हल हो सकता है (अर्थात, अभी तक मौजूद नहीं है, निम्नलिखित दृष्टिकोण खरोंच से इस तरह के आवरण का निर्माण करेगा - ओपी स्पष्ट नहीं था कि आवरण पहले से मौजूद है या नहीं):<div id="destination" />

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

यह आशाजनक लगता है। हालाँकि, जब मैं $("[id^=row]").wrapAll("<fieldset></fieldset>")इस तरह से कई नेस्टेड संरचना पर करने की कोशिश कर रहा था :

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

यह उन लोगों को सही ढंग से लपेटता है <div>...</div>और कुछ <input>...</input>मामलों को छोड़ देता है <label>...</label>। इसलिए मैंने $("row1").append("#a_predefined_fieldset")इसके बजाय स्पष्ट का उपयोग किया । तो, YMMV।

— RayLuo
स्रोत