Let's Learn about DOM Manipulation

DOM Manipulation means adding elements to your page. There are many ways to do it.

Let's Start

In the above embed you can see the HTML structure. We can select body and append elements to it.

Appending Strings to Body Tag

const body = document.body;

// we can append strings too

body.append("Hello World")

// but if we do this

// body.appendChild("Hello World")
// error in console

The difference between append and appendChild is we can append string with append function but with appendChild we need to append Nodes like div, span , anchor , p tags.

Appending Elements to Body Tag with append

const body = document.body;
const div = document.createElement("div");

div.innerText = "Hello World"

// div.textContent = "Hello World 2"

body.append(div)

Both innerText and textContent will show the same output.

But here is a Catch!

There is a difference between innerText and textContent

While viewing the element through innerText and textContent. When you console.log the textContent will print all the content either it contains spaces, indentation and all the content inside div whereas innerText will shows the current value of the div that it contains.

// in HTML embed code above add div
//  <div>
//    <span>Hello</span>
//    <span style="display : none;">There!</span>

//  </div>

const div = document.querySelector("div");

console.log(div.textContent);
console.log(div.innerText);

Appending Elements to Body Tag with innerHTML

const body = document.body;

const div = document.createElement("div");

div.innerHTML = "<strong>Hello World</strong>"

body.append(div)

if user generated content added through innerHTML , malicious code can be injected popularly to be known as Cross Site Scripting Attack.

To overcome this... Use innerText

const body = document.body;

const div = document.createElement("div");

const strong = document.createElement("strong")

strong.innerText = "Hello World"

div.append(strong)

body.append(div)

Output will be the same as above. You can check CodePen Embed Link

Removing Elements

For removing elements from a particular element we use remove()

// in HTML embed this code
//  <div>
//    <span id="hello">Hello</span>
//    <span id="there">There!</span>

//  </div>

const body = document.body
const div = document.querySelector("div");
const hello = document.querySelector("#hello");
const there = document.querySelector("#there");

//To Remove The Element
there.remove();

//To append the same element
div.append(there);

Access Element Attributes

For accessing or modifying element attributes for a particular element we use getAttribute() or we can access attributes directly. Let's see..

// in HTML embed this code
//  <div>
//    <span title="helloTitle" id="hello">Hello</span>
//    <span id="there">There!</span>

//  </div>

const body = document.body
const div = document.querySelector("div");
const hello = document.querySelector("#hello");
const there = document.querySelector("#there");

console.log(hello.getAttribute("id"),hello.getAttribute("title"))

//OR

console.log(hello.id,hello.title)

Setting Element Attributes

For accessing or modifying element attributes for a particular element we use setAttribute() or we can access attributes directly. Let's see..

// in HTML embed this code
//  <div>
//    <span title="helloTitle" id="hello">Hello</span>
//    <span id="there">There!</span>

//  </div>

const body = document.body
const div = document.querySelector("div");
const hello = document.querySelector("#hello");
const there = document.querySelector("#there");

console.log(hello.setAttribute("title","newTitle"),hello.setAttribute("id","newId"))

//OR

console.log(hello.id = "newId",hello.title = "newTitle")

Accessing Data Attributes

For accessing data attributes for a particular element we use data-set as an attribute in the element

// in HTML embed this code
  <div>

    <span title="helloTitle" data-test ="this is a test" data-longer-name=" data longer text" id="hello">Hello</span>
    <span id="there">There!</span>

  </div>

// in script
const body = document.body
const div = document.querySelector("div");
const hello = document.querySelector("#hello");
const there = document.querySelector("#there");

console.log(hello.dataset)

hello.dataset.newName ="CodePen"

newName will be added in the element as an attribute.

Accessing ClassList

For accessing ClassList for a particular element we use classList property

// in HTML embed this code
  <div>

    <span class="hello1 hello2 " id="hello">Hello</span>
    <span id="there">There!</span>

  </div>

// in script
const body = document.body
const div = document.querySelector("div");
const hello = document.querySelector("#hello");
const there = document.querySelector("#there");

//To Add
hello.classList.add("new-class")

//To Remove
hello.classList.remove("new-class")

//To Toggle 
hello.classList.toggle("new-class-3")

Toggle a class will remove the class if exist already or it will add the class if not.

Modifying Styles

For accessing ClassList for a particular element we use classList property

// in HTML embed this code
  <div>

    <span class="hello1 hello2 " id="hello">Hello</span>
    <span id="there">There!</span>

  </div>

// in script
const body = document.body
const div = document.querySelector("div");
const hello = document.querySelector("#hello");
const there = document.querySelector("#there");

//To Access Style
hello.style.backgroundColor = "red"

To modify styles you can use camelCase syntax and access that style and modify it accordingly

That's It For Now. See You In Next One ✌️