Modifying an HTML document with JavaScript (Part 1)

Modifying an HTML document with JavaScript (Part 1)

Modifying an HTML document with JavaScript (Part 1)

The Document Object Model allows us to create, modify or remove elements dynamically, modifying the existing page content. Lets start by creating an element.

Creating and adding elements

There are two methods of creating DOM element nodes:

  • document.createElement(tag) – creates an element with the given tag.
  • document.createTextNode(text) – creates a text node with the given text.

For example here are the stage for creating a paragraph:

  • let para = document.createElement('p'); creates a <p> (paragraph) element.
  • then use para.innerHTML = "Hello World"; to add text to the paragraph.
  • finally add the paragraph to the body using document.body.appendChild(para)

Here is a full example:

index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>

<script src ="myScript.js"></script>

</body>
</html>

myScript.js

"use strict"

let para = document.createElement('p');
para.innerHTML = "Hello World";
document.body.appendChild(para)

Output

Output

You can add a class to the created element as follows using element.className as follows:

index.html

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
.styled {
  padding: 23px;
  border: 10px solid red;
  border-radius: 3px;
  color: white;
  background-color: black;
}
</style>

</head>

<body>

<script src ="myScript.js"></script>

</body>
</html>

myScript.js

"use strict"

let para = document.createElement('p');
para.className = "styled";
para.innerHTML = "Hello World";
document.body.appendChild(para);

Output

Output

parentElement.appendChild(childElement)

The parentElement.appendChild(childElement) we used above appends childElement as the last child of parentElement.

Lets see another example of using parentElement.appendChild(childElement):

// create list element
let myList = document.createElement('ol');

// create list item element
let listItem1 = document.createElement("li");
listItem1.innerHTML = "Anna";

// append list item element to list element
myList.appendChild(listItem1);

// append the list to body element
document.body.appendChild(myList);

Output

Dom append

You can even append an item to an already existing list:

index.html

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<ol id ="students">
<li>Tanya</li>
<li>Betty</li>
<li>Thelma</li>
</ol>

<script src ="myScript.js"></script>

</body>
</html>

myScript.js

// create list item element
let listItem1 = document.createElement("li");
listItem1.innerHTML = "Anna";

// append list item element to list id students
students.appendChild(listItem1);

Output

AppendChild

parentElement.insertBefore(node, nextSibling)

parentElement.insertBefore(node, nextSibling) is used to insert a node before nextSibling into parentElement. For example we can insert a list item before the third list item of a list as follows:

let listItem1 = document.createElement("li");
listItem1.innerHTML = "Anna";

// insert list item element to list id students before the third child
students.insertBefore(listItem1, students.children[2]);

To insert a list item as the first list item of list id students we use either:

students.insertBefore(listItem1, students.children[0]); or students.insertBefore(listItem1, students.firstChild);

parentElement.replaceChild(node, oldChild)

parentElement.replaceChild(node, oldChild) replaces oldChild with new child node on parentElement.

For example:

// create list item element
let listItem1 = document.createElement("li");
listItem1.innerHTML = "Anna";

students.replaceChild(listItem1, students.children[2]);

node.prepend and node.append

node.append(...nodes or strings) append nodes or strings at the end of node.

node.prepend(...nodes or strings) insert nodes or strings at the beginning of node.

For example:

index.html

<ol id ="students">
<li>Tanya</li>
<li>Betty</li>
<li>Thelma</li>
</ol>

myScript.js

let firstStudent = document.createElement('li');
  firstStudent.innerHTML = 'Jughead';
  students.prepend(firstStudent);  

  let lastStudent = document.createElement('li');
  lastStudent.innerHTML = 'Veronica';
  students.append(lastStudent);

Output

Prepend

node.before, node.after and node.replaceWith

node.before(...nodes or strings) insert nodes or strings before the node.

node.after(...nodes or strings) insert nodes or strings after the node.

node.replaceWith(...nodes or strings) replaces node with the given nodes or strings.

For example:

students.before('Here is a list of my students');
  students.after('I hope you will like them');

 let firstStudent = document.createElement('li');
  firstStudent.innerHTML = 'Jughead';
  students.prepend(firstStudent);  

  let lastStudent = document.createElement('li');
  lastStudent.innerHTML = 'Veronica';
  students.append(lastStudent);

Output

Prepend

Multiple insertions

node.prepend, node.append, node.before, node.after and node.replaceWith can also be used to make multiple insertions in a single call.

let heading = document.createElement("h2");
  heading.innerHTML = "Our School"

  // multiple insertion
  students.before(heading, document.createElement("hr"),'Here is a list of my students');
   
  students.after('I hope you will like them');

  let firstStudent = document.createElement('li');
  firstStudent.innerHTML = 'Jughead';
  students.prepend(firstStudent);  

  let lastStudent = document.createElement('li');
  lastStudent.innerHTML = 'Veronica';
  students.append(lastStudent);

Output

Preped list