3.7. চাইল্ড হিসেবে অ্যাড করা

 

আমরা চাচ্ছি আমাদের newDiv কে বক্স ১ এর চাইল্ড হিসেবে অ্যাড করতে। এখন চাইল্ড হিসেবেও দুইভাবে অ্যাড করা যায়, একদম প্রথমে অথবা শেষে। যেটা আমাদের ডায়াগ্রামে খুব সুন্দর করে দেওয়া আছে।
এখন আমরা প্রথমে আমাদের বক্স ১ সিলেক্ট করে নিবো। বক্স ১ এর আইডি হচ্ছে #box1 এটা দিয়ে খুব সহজেই সিলেক্ট করতে পারিঃ

var box1 = document.getElementById('box1');

ব্যাস এখন box1 এ আমরা বক্স ১ সিলেক্ট করে রেখে দিলাম। এটার উপরেই insertAdjacentElement() মেথড দিয়ে প্রথমে শুরুর দিকে(‘afterbegin’) আমাদের newDiv ঢুকাবোঃ

box1.insertAdjacentElement('afterbegin', newDiv);

 

এবার দেখুন ডমে বক্স ১ এর ভিতরে শুরুর দিক থেকে আমাদের newDiv প্লেস হয়েছে। আগের যে লেখাটা ছিলো BOX 1, সেটার আগেই স্থান পেয়েছে, ডায়াগ্রামটা দেখুন, ঠিক ওরকমভাবেইঃ

এখন আবার আমরা চাচ্ছি আমাদের আরেকটা তৈরী করা ইলিমেন্ট newParagraph কেও এই বক্স ১ এ চাইল্ড হিসেবে ঢুকাতে। কিন্তু আমরা এটা চাইল্ড শেষের দিক হতে ঢুকাবোঃ

box1.insertAdjacentElement('beforeend', newParagraph);

ব্যাস! হয়ে গেলোঃ