javascript - किसी तत्व को किसी अन्य तत्व में कैसे स्थानांतरित करें?




jquery html (8)

आप 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>

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

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

इस मामले में:

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

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

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

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

बाद में डालने के लिए,

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

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

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

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

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

codepen काम करने का प्रयास करें

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>


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

एक टुकड़ा घोषित करें:

var fragment = document.createDocumentFragment();

खंड में वांछित तत्व संलग्न करें:

fragment.appendChild(document.getElementById('source'));

वांछित तत्व के लिए टुकड़े संलग्न करें:

document.getElementById('destination').appendChild(fragment);

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


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

jQuery के पास ऐसा करने का कोई तरीका नहीं है लेकिन मानक डोम फ़ंक्शन एपेंड चाइल्ड करता है।

//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


मेरा समाधान:

चाल:

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

कॉपी:

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

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


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


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

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

यहां एक छोटा सा उदाहरण दिया गया है:

तत्व के ऊपर जाने के लिए:

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

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

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

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

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

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

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





html