HTML DOM createDocumentFragment() মেথড একটি ডকুমেন্ট ফ্র্যাগমেন্ট তৈরি করতে ব্যবহৃত হয়। ডকুমেন্ট ফ্র্যাগমেন্ট DOM স্ট্রাকচারকে প্রভাবিত করে না কারণ এটি মেমরিতে থাকে। যখন আমরা ডকুমেন্ট ফ্র্যাগমেন্টকে DOM-এ অ্যাপেন্ড করি, এটি মূলত এর চাইল্ডদের দ্বারা রিপ্লেস করা হয় অর্থাৎ ডকুমেন্টে কোনো ডকুমেন্ট ফ্র্যাগমেন্ট অ্যাপেন্ড হয় না শুধু এর চাইল্ডগুলো অ্যাপেন্ড হয়।
সিনট্যাক্স
createDocumentFragment() মেথডের সিনট্যাক্স নিচে দেওয়া হলো -
document.createDocumentFragment()
এটি একটি DocumentFragment অবজেক্ট রিটার্ন করে, যা ডকুমেন্ট ফ্র্যাগমেন্ট নোডকে রিপ্রেজেন্ট করে।
উদাহরণ
HTML DOM createDocumentFragment() মেথডের একটি উদাহরণ দেখি -
<!DOCTYPE html> <html> <body> <h1>createDocumentFragment() example</h1> <p>নিচের বাটনে ক্লিক করুন createDocumentFragment মেথড ব্যবহার করে লিস্ট আইটেম পরিবর্তন করতে।</p> <button type="button" onclick="changeList()">CHANGE</button> <ul> <li>Mango</li> <li>Peach</li> <li>Guava</li> <li>Strawberry</li> <li>Papaya</li> </ul> <script> function changeList() { var x = document.createDocumentFragment(); x.appendChild(document.getElementsByTagName("LI")[0]); x.childNodes[0].childNodes[0].nodeValue = "Watermelon"; document.getElementsByTagName("UL")[0].appendChild(x); } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
CHANGE বাটনে ক্লিক করলে -
উপরের উদাহরণে -
আমরা পাঁচটি লিস্ট আইটেম সহ একটি আনঅর্ডার্ড লিস্ট তৈরি করেছি -
<ul> <li>Mango</li> <li>Peach</li> <li>Guava</li> <li>Strawberry</li> <li>Papaya</li> </ul>
তারপর আমরা CHANGE বাটন তৈরি করেছি যা ইউজার ক্লিক করলে changeList() মেথড এক্সিকিউট করবে -
<button type="button" onclick="changeList()">CHANGE</button>
changeList() ফাংশন ডকুমেন্ট অবজেক্টের createDocumentFragment() মেথড ব্যবহার করে একটি ডকুমেন্ট ফ্র্যাগমেন্ট তৈরি করে এবং ভেরিয়েবল x-এ অ্যাসাইন করে। appendChild() মেথড ব্যবহার করে লিস্ট এলিমেন্টকে ডকুমেন্ট ফ্র্যাগমেন্টের চাইল্ড বানাই। ডকুমেন্ট ফ্র্যাগমেন্টের ভিতরে থাকা প্রথম লিস্ট এলিমেন্টের ভ্যালু "Watermelon" সেট করি। তারপর ডকুমেন্ট ফ্র্যাগমেন্টকে <ul> এলিমেন্টের লাস্ট চাইল্ড হিসেবে অ্যাপেন্ড করি -
function changeList() { var x = document.createDocumentFragment(); x.appendChild(document.getElementsByTagName("LI")[0]); x.childNodes[0].childNodes[0].nodeValue = "Watermelon"; document.getElementsByTagName("UL")[0].appendChild(x); }
