dheeraj koranga's blog

Navigation in the DOM

dheeraj koranga's photo
dheeraj koranga
·

3 min read

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.

  1. createElement():
  • Creates a new element node (but does not add it to the document)
  1. parentElement:
  • Retrieves the parent element of a given element. It returns null if there’s no parent.
  1. children:
  • Returns a live HTMLCollection of all child elements (not text nodes) of a given element.
  1. 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

  1. 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
  1. 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
  1. 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
  1. 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

  1. removeChild():

    • Removes a child node from the parent element

  2. 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.

JavaScriptjsnavigationcreateElement#appendjs functions