How to return HTML or build HTML using JavaScript ?

23 Apr, 2021
JavaScript is very powerful and with it, we can build dynamic web content and add many features to a web application.  With HTML, we create the structure of the web page and the same thing can also be done with JavaScript. 
There are few JavaScript methods called as createElement(), appendChild() with which we can add nodes to the DOM tree on the fly. 
Example 1: Creating a div element
Say you just want to create a div element, then for that below is the code snippet:
let div_element = document.createElement("div")
 
Example 2: Adding a child node to an HTML element
Say there’s a div with ID “divele”
<div id="divele"></div>
And you want to add a paragraph element inside div. Below is the code snippet
Javascript
let div_elem = document.getElementById("divele")  let child_p_elem = document.createElement("p")  div_elem.appendChild(child_p_elem)
This code snippet is adding a paragraph element inside div with the help of appendChild() method.
Example 3: Removing a child node of an HTML element
Consider an unordered list having 3 list items in it.  And you want to remove the first child <li> element in it.
HTML
<ul id="ulele">  <li>Food</li>  <li>Milk</li>  <li>Vegetable</li></ul>
Using the removeChild() method, we can remove the first <li> child from the unordered list:
Javascript
let ul_ele = document.getElementById("ulele")  // 0 represents the first childul_ele.removeChild(ul_ele.childNodes[0])
Example 4: To access all the child elements of a parent HTML element 
Now, to access all the child elements of the div having id “divele”, we will use the childNodes() method which will return the required child nodes.
Javascript
let div_ele = document.getElementById("divele")  // Returns an array of child nodes// contained inside the parent nodelet div_ele_childs = div_ele.childNodes 
Please find below the snapshot of the simple webpage that we are going to develop.
Complete Code:
HTML
<!DOCTYPE html><html lang="en">  <body>    <div id="divele">      </div>    <script type="text/javascript">        let parentDiv = document.getElementById("divele")          let heading = document.createElement("h1")          let unordered_list = document.createElement("ul")          unordered_list.setAttribute("id", "ulele")          heading.style.color = "green"        heading.textContent = "GeeksforGeeks"          parentDiv.appendChild(heading)          parentDiv.appendChild(unordered_list)          for (let i = 0; i < 4; i++) {            let li_elem = document.createElement("li")            unordered_list.appendChild(li_elem)        }          unordered_list.childNodes[0].textContent = "Java"        unordered_list.childNodes[1].textContent = "Python"        unordered_list.childNodes[2].textContent = "Javascript"        unordered_list.childNodes[3].textContent = "C#"    </script></body>  </html>
Output:
HTML-Questions
JavaScript-Methods
JavaScript-Questions
Picked
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Angular File Upload
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request