To create a new HTML element using JavaScript, you need to use the createElement()
document method and add it to the body of the HTML.
Let's say we want to make a paragraph tag with some text content and add it to the body of the HTML.
First, Let's create the paragraph tag using the createElement()
method.
- The method accepts a valid tag name as string eg:
p
,div
, etc.
// create paragraph tag
const paragraph = document.createElement("p");
Now let's create some text content using the createTextNode()
document method.
- The method accepts a valid string.
// create paragraph tag
const paragraph = document.createElement("p");
// create some text
const textNode = document.createTextNode("Hello World!");
after creating text content, we need to attach the text content node to the paragraph node.
For that let's use the appendChild()
node method.
- The
appendChild()
method accepts a valid node reference.
// create paragraph tag
const paragraph = document.createElement("p");
// create some text
const textNode = document.createTextNode("Hello World!");
// add text node to paragragh node
paragraph.appendChild(textNode);
Lastly, we need to attach the entire paragraph tag to the body of the HTML itself.
Let's use the appendChild()
node method again to attach it to the HTML body node.
// create paragraph tag
const paragraph = document.createElement("p");
// create some text
const textNode = document.createTextNode("Hello World!");
// add text node to paragragh node
paragraph.appendChild(textNode);
// get the HTML body tag
const body = document.querySelector("body");
// attach paragraph to the body tag.
body.appendChild(paragraph);