स्टेट खोए बिना डीओएम एलिमेंट को दूसरी जगह ले जाना

appendChild() या insertBefore() जैसे पारंपरिक तरीकों का इस्तेमाल करके डीओएम एलिमेंट को रीपैरेंट करने पर, ब्राउज़र उस एलिमेंट को डीओएम से हटा देता है और फिर उसे नई जगह पर डाल देता है. "हटाएं और शामिल करें" की इस कार्रवाई से, कई इंटरनल स्टेट रीसेट हो जाती हैं. इससे <iframe> एलिमेंट फिर से लोड होते हैं, सीएसएस ऐनिमेशन रीस्टार्ट होते हैं, और इनपुट फ़ील्ड फ़ोकस से हट जाते हैं.

किसी एलिमेंट को उसकी स्थिति को बनाए रखते हुए दूसरी जगह ले जाने के लिए, moveBefore() एपीआई का इस्तेमाल करें. यह तरीका, आइटम को एक ही बार में दूसरी जगह ले जाता है. इसमें आइटम को हटाने और डालने के चरणों को पूरी तरह से बायपास कर दिया जाता है.

किसी एलिमेंट को उसकी स्थिति के साथ दूसरी जगह ले जाना

moveBefore() का इस्तेमाल ठीक उसी तरह करें जिस तरह insertBefore() का इस्तेमाल किया जाता है. इसके लिए दो आर्ग्युमेंट की ज़रूरत होती है: वह नोड जिसे मूव करना है और वह रेफ़रंस नोड जिसे पहले शामिल करना है (या नए पैरंट के आखिर में जोड़ने के लिए null).

const newParent = document.getElementById('new-parent');
const elementWithState = document.getElementById('iframe-or-focused-input');

// MANDATORY: Use moveBefore to preserve state. 
// Passing null as the second argument appends the element to the end of newParent.
newParent.moveBefore(elementWithState, null);

कस्टम एलिमेंट (वेब कॉम्पोनेंट) को दूसरी जगह ले जाना

अगर moveBefore() का इस्तेमाल करके कस्टम एलिमेंट को मूव किया जाता है, तो उनके connectedCallback और disconnectedCallback लाइफ़साइकल मेथड ट्रिगर नहीं होंगे.

अगर आपके कस्टम एलिमेंट को मूव करने पर कोई खास लॉजिक लागू करना है, तो कस्टम एलिमेंट की डेफ़िनिशन में connectedMoveCallback() तरीका लागू करें.

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    // Runs on initial insertion.
  }
  
  connectedMoveCallback() {
    // Runs when the element is moved via moveBefore().
    // Use this to update state that depends on the new DOM location.
  }
}

फ़ॉलबैक रणनीतियां

चूंकि moveBefore() एक परतदार वृद्धि है, इसलिए इसे कॉल करने से पहले आपको सुविधा की पहचान करने की सुविधा का इस्तेमाल करना होगा. साथ ही, पुराने ब्राउज़र के लिए, insertBefore() या appendChild() के पुराने ऑपरेशन पर वापस जाना होगा.

const targetParent = document.getElementById('target-container');
const nodeToMove = document.getElementById('moving-element');

// Check if moveBefore is supported on the Element prototype
if ('moveBefore' in Element.prototype) {
  targetParent.moveBefore(nodeToMove, null);
} else {
  // Fallback: traditional move. 
  // Note: This WILL reset <iframe>, animation, and focus state in unsupported browsers.
  targetParent.insertBefore(nodeToMove, null);
}