All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Append HTML To Body

Last Updated : Mar 11, 2024

JavaScript Append HTML To Body

In this tutorial we will show you the solution of JavaScript append HTML to body, let's say we want to add anything to a page after it has loaded completely.

JavaScript provides us with a wide range of tools. Some of them, such as add, appendChild, insertAdjacentHTML, and innerHTML.

The tricky part about using JavaScript to append and insert data is figuring out which tool to use and how each one works. Let's try to find things out.

Step By Step Guide On JavaScript Append HTML To Body :-

The Node interface's appendChild() method is used to append nodes (usual items) to the end of a specified parent node in JavaScript. It can be used to modify existing child nodes or to create new ones:

Putting together elements

To add new element to the end of a parent node, first, construct it with createElement and then appendChild() for the newly generated element.

Existing components

The appendChild() method also works with existing child nodes, allowing you to relocate them throughout the document. AppendChild() transfers the supplied child node from its present place to the end of the list of child nodes under the specified parent node in this case.

It's worth noting that there's no need to delete existing child nodes from their parent node before appending them to another node.

This is due to the fact that a node cannot exist in two places within the same document at the same time.

When you use appendChild() to add an existing child node to another node, the child node is removed first, then inserted at the new location.

<html>
<head>
</head>
<script>
var myDiv = document.createElement("div");
myDiv.id = 'div_id';
myDiv.innerHTML = "<h1>Welcome!</h1>";
document.body.appendChild(myDiv);
</script>
</body>
</html>
  1. To begin, type <! DOCTYPE html> to tell the web browser that the file is in HTML format.
  2. The <html> element, on the other hand, is used to signal the start of HTML content.
  3. The <head> tag now contains the information about web pages. The <title> element is used in this tag to provide a web page title. For example, the <head> and <title> tags are paired tags. As a result, both have the </head> and </title> closing tags.
  4. Finally, the <body> element specifies the web page's content. All of the content for the website will be written here. To insert our javascript code, we used the script tag inside the body element.
  5. Using the document, we created a DIV element. createElement() is a method that creates a new element.
  6. We changed the ID property of the element to "div_id."
  7. We changed the DIV's content by using the innerHTML attribute.
  8. Finally, we used the appendChild() method to append the element to our body.
  9. The <body> and <html> tags are closed by the </body> and </html> tags, respectively.

Conclusion :-

Although this method is a little more time-consuming, it will work in all the use cases. Overall, it's a better option than altering the document.body.innerHTML property manually.

We hope you understood how Javascript append HTML to body, I hope this tutorial on JavaScript append HTML to body helps you.