Navigation in the DOM

In JavaScript, DOM manipulation allows for dynamic changes to HTML elements, their content, and structure. Below is a detailed explanation of navigating through elements and adding/removing elements.

createElement():

Creates a new element node (but does not add it to the document)

parentElement:

Retrieves the parent element of a given element. It returns null if there’s no parent.

children:

Returns a live HTMLCollection of all child elements (not text nodes) of a given element.

previousElementSibling and nextElementSibling:

These properties allow you to navigate to the previous and next sibling element (ignores text and comment nodes).

<!DOCTYPE html>
    <div id="parentDiv">
      <p>sister of firstDiv</p>
      <div id="firstDiv">
        <p>First Paragraph</p>
        <p>second Paragraph</p>
        <p>third Paragraph</p>
      </div>
      <img src="" alt="" class="img" />
      <p>brother of firstDiv</p>
    </div>

In this example we have created an element , and displayed its parent, children and siblings

Adding Elements

appendChild():

Appends a new child node to the end of a parent element’s child list.

In this example we have created a btn element and added it as a child of firsDiv element

append():

Inserts content (text or elements) at the end of the parent element. Unlike appendChild(), it can append multiple elements or text nodes.

In this example we have use append() method for appending the text to the exsisting element or for appending element to the document

prepend():

Inserts content at the beginning of the parent element.

In this example, we have used the prepend() method which appends the element or text at the start of an element

insertAdjacentElement():

Inserts an element relative to another element. The position can be:
- "beforebegin", "afterbegin", "beforeend", or "afterend".
let suppose there is a paragraph tag and you want to use insertAdjacentElement() method to add a button, in the context of the paragraph tag, the following action will take place

a. obj.insertAdjacentElement(beforebegin, btn) → it will add btn before the paragraph

b. obj.insertAdjacentElement(afterend, btn) → it will add btn after the paragraph

c. obj.insertAdjacentElement(afterbegin, btn) → add btn as the first child of the paragraph

d. obj.insertAdjacentElement(beforend, btn) → add btn as the last child of the paragraph

Removing Elements

removeChild():
- Removes a child node from the parent element
remove():
- Directly removes the element from the DOM. No need to specify the parent.

    Btn.remove()

Summary of Methods:

Navigation:
- parentElement: Gets the parent of an element.
- children: Gets the child elements.
- previousElementSibling / nextElementSibling: Navigates to the previous or next sibling element.
Adding Elements:
- createElement(): Creates a new element.
- appendChild(): Adds a child element to the end.
- append(): Adds elements or text to the end.
- prepend(): Adds elements or text to the beginning.
- insertAdjacentElement(): Inserts an element at a specific position relative to another element.
Removing Elements:
- removeChild(): Removes a child element from its parent.
- remove(): Directly removes the element from the DOM.

Navigation in the DOM

Adding Elements

Removing Elements

Summary of Methods:

Subscribe to my newsletter

dheeraj koranga

dheeraj koranga