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);
ব্যাস! হয়ে গেলোঃ
উদাহরন
Append an item to a list:
const node = document.createElement("li"); const textnode = document.createTextNode("Water"); node.appendChild(textnode); document.getElementById("myList").appendChild(node);
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JavaScript appendChild() Demo</title> </head> <body> <ul id="menu"></ul> <script> function createMenuItem(name) { let li = document.createElement("li"); li.textContent = name; return li; } // get the ul#menu const menu = document.querySelector("#menu"); // add menu item menu.appendChild(createMenuItem("Home")); menu.appendChild(createMenuItem("Services")); menu.appendChild(createMenuItem("About Us")); </script> </body> </html>
Move an item from one list to another:
const node = document.getElementById("myList2").lastElementChild; document.getElementById("myList1").appendChild(node);
<ul id="first-list"> <li>Everest</li> <li>Fuji</li> <li>Kilimanjaro</li> </ul> <ul id="second-list"> <li>Karakoram Range</li> <li>Denali</li> <li>Mont Blanc</li> </ul>
// get the first list const firstList = document.querySelector("#first-list"); // take the first child element const everest = firstList.firstElementChild; // get the second list const secondList = document.querySelector("#second-list"); // append the everest to the second list secondList.appendChild(everest);