appendChild() বা insertBefore()-এর মতো প্রথাগত পদ্ধতি ব্যবহার করে DOM এলিমেন্ট রিপ্যারেন্টিং করার সময়, ব্রাউজার অন্তর্নিহিতভাবে DOM থেকে এলিমেন্ট সরিয়ে দেয় এবং তারপর এটি নতুন লোকেশনে যোগ করে। এই "সরান ও যোগ করুন" অপারেশন অনেক ইন্টার্নাল স্টেট রিসেট করে, যার ফলে <iframe> এলিমেন্ট আবার লোড হয়, CSS অ্যানিমেশন আবার শুরু হয় এবং ইনপুট ফিল্ড ফোকাস হারায়।
কোনও এলিমেন্টের স্ট্যাটাস বজায় রেখে সেটি সরাতে, moveBefore() API ব্যবহার করুন। এই পদ্ধতিটি একটি অ্যাটমিক মুভ সম্পাদন করে, অপসারণ এবং সন্নিবেশের ধাপগুলি সম্পূর্ণরূপে বাইপাস করে।
স্টেট সহ কোনও এলিমেন্ট সরানো হচ্ছে
insertBefore() যেভাবে ব্যবহার করেন ঠিক সেইভাবেই moveBefore() ব্যবহার করুন। এটির জন্য দুটি আর্গুমেন্ট প্রয়োজন: যে নোডটি সরাতে হবে এবং যে রেফারেন্স নোডের আগে যোগ করতে হবে (অথবা নতুন পেরেন্টের শেষে যোগ করার জন্য 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);
}