Menu
3.7. চাইল্ড হিসেবে অ্যাড করা
আমরা চাচ্ছি আমাদের newDiv কে বক্স ১ এর চাইল্ড হিসেবে অ্যাড করতে। এখন চাইল্ড হিসেবেও দুইভাবে অ্যাড করা যায়, একদম প্রথমে অথবা শেষে। যেটা আমাদের ডায়াগ্রামে খুব সুন্দর করে দেওয়া আছে। এখন আমরা প্রথমে আমাদের বক্স ১ সিলেক্ট করে নিবো। বক্স ১ এর আইডি হচ্ছে #box1 এটা দিয়ে খুব সহজেই সিলেক্ট করতে পারিঃvar box1 = document.getElementById(‘box1’);
box1.insertAdjacentElement(‘afterbegin’, newDiv);
এখন আবার আমরা চাচ্ছি আমাদের আরেকটা তৈরী করা ইলিমেন্ট 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#menuconst menu = document.querySelector(“#menu”);// add menu itemmenu.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 listconst firstList = document.querySelector(“#first-list”);// take the first child elementconst everest = firstList.firstElementChild;// get the second listconst secondList = document.querySelector(“#second-list”);// append the everest to the second listsecondList.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?
