Creating HTML Elements with the DOM Create Method in JavaScript

In JavaScript, you can create, manipulate, and modify HTML elements on a webpage using the Document Object Model (DOM). The DOM represents the webpage as a tree-like structure of objects, where each node represents an element in the HTML document.

In JavaScript, the Document Object Model (DOM) allows developers to dynamically create HTML elements and insert them into the web page. There are several methods that can be used to create new elements in the DOM, including createElement, createTextNode, and appendChild.

createElement(tagName) : This method creates a new element with the specified tag name, such as "div", "p", "img", etc.
createTextNode(text): This method creates a new text node with the specified text.
appendChild(node) : This method adds a node as the last child of a specified parent node.
insertBefore(newNode, referenceNode) : This method inserts a new node before an existing node in the DOM.
removeChild : This method that is used to remove a child element from its parent element.
remove : This is a newer method that allows you to remove an element directly, without specifying its parent.

These methods allow you to create and manipulate elements in the DOM dynamically using JavaScript. This can be useful for creating dynamic user interfaces, animating elements, and more.

createElement

In JavaScript, createElement() is a method used to create a new element node in the Document Object Model (DOM). It allows you to dynamically generate HTML elements on the fly, which can be very useful when building dynamic web applications.

The createElement() method is available on the document object, which represents the current web page. To use it, you need to call the createElement() method and pass in the name of the element you want to create as a string. For example, to create a new div element, you would call

Once you have created the new element, you can manipulate it in various ways using JavaScript. For example, you can set its attributes, add it to the DOM, or modify its content. Here's an example

let para = document.createElement("p");
para.innerHTML = "This is a <i>Sample Paragraph</i>";
para.style.color = "brown";

This code creates a new p element in the current HTML document using the createElement method of the document object in JavaScript.

The newly created element is then assigned to the variable para.

Next, the innerHTML property of the para element is set to the string "This is a <i>Sample Paragraph</i>>". This will create a new paragraph with the text "This is a" and an italicized "Sample Paragraph" within it.

Finally, the style.color property of the para element is set to "brown", which will change the color of the text in the paragraph to brown.

appendChild

In JavaScript, appendChild() is a method that adds a new child node to the end of a parent node.

The appendChild() method can also be used to move an existing element to a new location within the DOM. Simply call appendChild() on the new parent element and pass in the existing element as the parameter. This will remove the existing element from its current location and place it at the end of the new parent element.

Here is an example:

const body = document.querySelector("body");
body.appendChild(para);

The code const body = document.querySelector("body"); selects the element from the HTML document using the querySelector method and assigns it to the body variable.

The code body.appendChild(para); appends the para element (which was created earlier with document.createElement("p")) to the end of the body element. This is achieved using the appendChild method which is used to add a child element to the end of the parent element. In this case, the parent element is the body element and the child element being added is the para element.

So, the overall effect of these two lines of code is to create a new paragraph element, set its innerHTML to "This is a Sample Paragraph" (with the word "Sample" in italics), set its color to brown, and then append it as a child element to the end of the element in the HTML document.

insertBefore

The insertBefore method in JavaScript is used to insert a new HTML element before an existing element on the webpage. It is a method of the parent node and allows you to add an element to the existing DOM tree as a child element.

The syntax for insertBefore method is as follows:

parentNode.insertBefore(newNode, referenceNode);

Here, parentNode is the node before which you want to insert the new node, newNode is the node that you want to insert, and referenceNode is the node that you want to insert the new node before.

Here is an example:

let h1 = document.createElement("h1");
h1.innerHTML = "This is Heading";
h1.style.color = "red";
body.insertBefore(h1, para);

This code creates a new h1 element using the createElement method and sets its innerHTML to "This is Heading". The color of the text in the h1 element is set to red using the style.color property.

Then, it uses the insertBefore method to insert the h1 element before the para element in the body. This means that the h1 element will be placed just before the para element in the HTML structure of the body.

The syntax for the insertBefore method is parentNode.insertBefore(newNode, referenceNode), where parentNode is the element that the new node will be inserted into, newNode is the new element being inserted, and referenceNode is the existing element before which the new node will be inserted.

removeChild

In JavaScript, the removeChild() method is used to remove a specified child node from its parent node. It is used to manipulate the Document Object Model (DOM) of an HTML page.

The syntax of the removeChild() method is as follows:

parent.parent(child);

where parent is the node from which we want to remove the child node and child is the node to be removed.

Here is an example:

const removeBtns = document.querySelectorAll(".btnRemove");
removeBtns.forEach((btn) => {
  btn.addEventListener("click", function () {
    const tr = this.parentNode.parentNode;
    let td = tr.childNodes[5];
    console.log(td);
    tr.removeChild(td)
  });
});

This JavaScript code selects all elements with a class of "btnRemove" using the querySelectorAll() method and stores them in the removeBtns variable as a NodeList. It then iterates through each button using the forEach() method and adds a click event listener to each button.

When the button is clicked, the function defined in the event listener is executed. It selects the parent node of the button twice to get the tr element that contains the button. It then selects the sixth child node of the tr element (which is the sixth td element), and removes it from the tr element using the removeChild() method.

Essentially, this code removes the sixth column of a table row when the corresponding "Remove" button is clicked.

remove

In JavaScript, the remove() method is used to remove an element from the DOM. This method is available on any DOM element and can be called directly on the element itself.

The remove() method does not take any arguments, and simply removes the element from the DOM, along with all its child nodes and event listeners. Once an element is removed from the DOM, it is no longer visible on the web page.

Here is an example:

const removeBtns = document.querySelectorAll(".btnRemove");
removeBtns.forEach((btn) => {
  btn.addEventListener("click", function () {
    const tr = this.parentNode.parentNode;
    //tr.remove();
  });
});

This code defines a click event listener on all the elements with class name "btnRemove" using the querySelectorAll() method. It then iterates over each element using the forEach() method and adds a click event listener to each of them.

When a user clicks on a button with class "btnRemove", it triggers the event listener function, which selects the parent node of the button twice to get to the table row (tr) containing the button using parentNode property.

The code is currently commented out, but if the tr.remove() line was not commented out, it would remove the entire table row from the HTML document using the remove() method.

This code is useful for creating a delete function for a table row in an HTML document.