DOM এ Elements Insert এবং Remove করা

MooTools ব্যবহার করে ওয়েব পেজের DOM (Document Object Model) এ এলিমেন্ট ইনসার্ট এবং রিমুভ করা অনেক সহজ। MooTools-এর Element ক্লাস এবং এর ফাংশনগুলো ব্যবহার করে আপনি সহজেই HTML এলিমেন্টগুলিকে পেজে যুক্ত (insert) এবং মুছে ফেলতে (remove) পারেন। নিচে এই দুটি কাজের জন্য MooTools-এর বিভিন্ন ফিচার এবং সিনট্যাক্স ব্যাখ্যা করা হলো।

১. DOM এ এলিমেন্ট ইনসার্ট করা (Insert Elements)

MooTools এর মাধ্যমে DOM এ নতুন এলিমেন্ট ইনসার্ট করা খুবই সহজ। inject() এবং adopt() ফাংশনগুলি ব্যবহার করে আপনি সহজেই নতুন এলিমেন্ট তৈরি করে পেজে যোগ করতে পারেন।

নতুন এলিমেন্ট তৈরি এবং ইনসার্ট করা

window.addEvent('domready', function() {
    // একটি নতুন প্যারাগ্রাফ এলিমেন্ট তৈরি করা
    var newElement = new Element('p', {
        'html': 'এটি একটি নতুন প্যারাগ্রাফ।'
    });
    
    // নতুন এলিমেন্টটি body তে যোগ করা
    newElement.inject(document.body);
});

এখানে:

• new Element('p'): এটি একটি নতুন প্যারাগ্রাফ (p) ট্যাগ তৈরি করে।
• 'html': 'এটি একটি নতুন প্যারাগ্রাফ': এটি নতুন এলিমেন্টের মধ্যে কিছু টেক্সট যোগ করে।
• inject(): এটি নতুন এলিমেন্টটি DOM এর একটি নির্দিষ্ট স্থানে যোগ করে। এখানে আমরা document.body তে ইনসার্ট করেছি, অর্থাৎ পেজের বডির মধ্যে।

নতুন এলিমেন্ট নির্দিষ্ট জায়গায় ইনসার্ট করা

window.addEvent('domready', function() {
    var newDiv = new Element('div', {
        'id': 'newDiv',
        'html': 'এই ডিভটি নতুনভাবে ইনসার্ট হয়েছে।'
    });
    
    // নতুন ডিভ এলিমেন্টটি body এর প্রথমে যোগ করা
    newDiv.inject(document.body, 'top');
});

এখানে inject() ফাংশনের দ্বিতীয় প্যারামিটার "top" ব্যবহার করা হয়েছে, যার মাধ্যমে এলিমেন্টটি body তে প্রথমে ইনসার্ট হবে। আপনি "bottom" ব্যবহার করলে এটি বডির শেষে ইনসার্ট হবে।

২. DOM থেকে এলিমেন্ট রিমুভ করা (Remove Elements)

MooTools এর destroy() ফাংশন ব্যবহার করে আপনি সহজেই একটি DOM এলিমেন্ট মুছে ফেলতে পারেন।

এলিমেন্ট রিমুভ করা

window.addEvent('domready', function() {
    // একটি ডিভ এলিমেন্ট নির্বাচন করা
    var myDiv = $('myDiv');
    
    // ডিভ এলিমেন্টটি মুছে ফেলা
    myDiv.destroy();
});

এখানে:

• $('myDiv'): এটি id="myDiv" নামক এলিমেন্টকে সিলেক্ট করে।
• destroy(): এটি ঐ এলিমেন্টটি DOM থেকে সরিয়ে ফেলে।

এলিমেন্ট রিমুভ করার আগে চেক করা

window.addEvent('domready', function() {
    var myDiv = $('myDiv');
    
    if (myDiv) {
        myDiv.destroy(); // যদি myDiv থাকে তবে সেটি মুছে ফেলুন
    }
});

এখানে আমরা প্রথমে চেক করেছি যে, myDiv নামক এলিমেন্টটি DOM তে আছে কিনা। যদি থাকে, তবে আমরা সেটি মুছে ফেলেছি।

৩. DOM এ এলিমেন্ট ইনসার্ট এবং রিমুভের মধ্যে কিছু অতিরিক্ত অপশন

adopt() ফাংশন

MooTools এর adopt() ফাংশনটি এক বা একাধিক নতুন এলিমেন্টকে পেজের অন্য কোন এলিমেন্টের মধ্যে যোগ করতে ব্যবহার হয়। এটি একটি ইনলাইন পদ্ধতি যা ব্যবহৃত হয়, যখন আপনি একাধিক এলিমেন্ট একই সাথে এক জায়গায় রাখতে চান।

window.addEvent('domready', function() {
    // দুটি নতুন এলিমেন্ট তৈরি করা
    var div1 = new Element('div', { 'html': 'এটি ডিভ ১' });
    var div2 = new Element('div', { 'html': 'এটি ডিভ ২' });

    // এই দুইটি ডিভ এলিমেন্টকে এক সাথে একটি অন্য ডিভে যোগ করা
    $('parentDiv').adopt(div1, div2);
});

এখানে adopt() ফাংশনটি দুটি এলিমেন্টকে একই সাথে parentDiv নামক এলিমেন্টে ইনসার্ট করেছে।

সারাংশ

MooTools এর inject() এবং destroy() ফাংশনগুলি DOM ম্যানিপুলেশনের জন্য অত্যন্ত কার্যকরী। inject() ব্যবহার করে নতুন এলিমেন্ট তৈরি এবং ইনসার্ট করা যায়, আর destroy() ব্যবহার করে DOM থেকে এলিমেন্ট সরানো যায়। এছাড়া, adopt() ফাংশন একাধিক এলিমেন্টকে একসঙ্গে অন্য একটি এলিমেন্টে ইনসার্ট করতে সহায়তা করে। MooTools এর মাধ্যমে এই ধরনের DOM ম্যানিপুলেশন খুবই সহজ এবং সুবিধাজনক।