Essential Notes on JavaScript DOM Manipulation

Creating Nodes

1. Create an Element

To create an HTML element dynamically in JavaScript:

const element = document.createElement('li');
element.innerHTML = 'List Item';

2. Create a Text Node

A text node can be created separately and appended to an element:

const textNode = document.createTextNode('Hridoy Chowdhury');
const parent = document.getElementById('root');
parent.append(textNode);

3. Create an Attribute Node

Attributes can be dynamically created and assigned to elements:

const attribute = document.createAttribute('class');
attribute.value = 'firstClass';
const element = document.querySelector('li');
element.setAttributeNode(attribute);

---

Accessing Attributes

1. getAttribute()

Retrieves the value of a specified attribute:

const element = document.getElementById('root');
console.log(element.getAttribute('id'));

2. setAttribute()

Sets the value of a specified attribute:

element.setAttribute('id', 'root1');
console.log(element.getAttribute('id'));

3. removeAttribute()

Removes a specified attribute from an element:

element.removeAttribute('id');
console.log(element.getAttribute('id')); // null

---

Adding Nodes to the DOM

1. appendChild(node)

Adds a node as the last child of a parent:

const parent = document.getElementById('root');
const element = document.createElement('li');
element.innerHTML = 'Item';
parent.appendChild(element);

2. append(node1, node2, ...)

Adds multiple nodes as the last child of a parent:

const parent = document.getElementById('root');
const element1 = document.createElement('li');
const element2 = document.createElement('li');
element1.innerHTML = 'Item 1';
element2.innerHTML = 'Item 2';
parent.append(element1, element2);

Difference between append() and appendChild()

Example:

function attach(content){
    const element = document.createElement('li');
    element.innerHTML = content;

    const element2 = document.createElement('li');
    element2.innerHTML = content + ' V2.0';

    const parent = document.getElementById('root');
    // parent.appendChild(element,element2);  // ❌ Invalid
    // parent.appendChild(element);  // ✅ Valid
    parent.append(element,element2);
}
attach('TS')
attach('NODE')

3. insertBefore(newNode, referenceNode)

Inserts a node before a specified reference node:

const newElement = document.createElement('li');
newElement.innerHTML = 'Inserted Item';
const referenceNode = parent.children[1];
parent.insertBefore(newElement, referenceNode);

4. prepend(node)

Adds a node as the first child of a parent:

const child = document.createElement('li');
child.innerHTML = 'First Item';
parent.prepend(child);

5. replaceChild(newNode, oldNode)

Replaces an existing node with a new one:

const newChild = document.createElement('li');
newChild.innerHTML = 'MongoDB';
const oldChild = parent.children[2];
parent.replaceChild(newChild, oldChild);

6. Using innerHTML

Directly sets the HTML content of an element:

parent.innerHTML = '<li>New Content</li>';

7. Using insertAdjacentElement()

Inserts HTML at different positions relative to an element:

const newElement = document.createElement('div');
newElement.innerHTML = 'Hello!';
parent.insertAdjacentElement('beforebegin', newElement); // Before the parent element
parent.insertAdjacentElement('afterbegin', newElement); // Inside, before first child
parent.insertAdjacentElement('beforeend', newElement); // Inside, after last child
parent.insertAdjacentElement('afterend', newElement); // After the parent element

Valid Position Values:

8. Using insertAdjacentHTML()

Inserts HTML code at a specific position relative to an existing element in the DOM.

Syntax:

element.insertAdjacentHTML(position, text);

• element: The target DOM element.

• position: A string indicating where to insert the HTML.

• text: The HTML string to insert.

Example Usage:

const div = document.getElementById("container");

// Insert a new paragraph before the div
div.insertAdjacentHTML("beforebegin", "<p>Before the div</p>");

// Insert a new paragraph inside the div at the beginning
div.insertAdjacentHTML("afterbegin", "<p>Inside the div (start)</p>");

// Insert a new paragraph inside the div at the end
div.insertAdjacentHTML("beforeend", "<p>Inside the div (end)</p>");

// Insert a new paragraph after the div
div.insertAdjacentHTML("afterend", "<p>After the div</p>");

Difference between insertAdjacentHTML() and insertAdjacentElement()

9. removeChild(node)

Removes a specified child node from a parent:

const childToRemove = document.querySelector('li');
parent.removeChild(childToRemove);

10. .remove() Method

Removes an element from the DOM:

const element = document.querySelector('li');
element.remove();

Summary

Creating Nodes

Accessing Attributes

Adding Nodes to the DOM