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

 

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

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

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

box1.insertAdjacentElement('afterbegin', newDiv);

 

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

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

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

box1.insertAdjacentElement('beforeend', newParagraph);

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

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

 

উদাহরন

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);

 

এসো নিজে করি
1. What is appendChild in Javascript?
 
2. What is removeChild in JavaScript?
 
3. What is a parent node?
 
4. Which property should be used to remove an element from DOM?
 
5. What can I use instead of appendChild?
3.6. আপডেট DOM element
3.8. Event capturing vs bubbling