To insert an element into the body tag in JavaScript, we have tested effectively with createElement() and appendChild() method and using the insertAdjacentHTML() method. Check out the details below to get more information.
Insert an Element into the Body tag in JavaScript.
Using createElement() and appendChild() method
Use can use the createElement() method to create a new element and then add the new element into the body tag by using the appendChild() method.
CreateElement()
Syntax:
document.createElement(type)
Parameters:
- type: is the type of element you want to create.
Return value: return value is element node.
AppendChild()
Syntax:
element.appendChild(node) or node.appendChild(node)
Parameters:
- node: is the node you want to append.
Return value: return value is appended node.
Example:
In this example, we create the function addelement2body by using createElement method to create a new paragraph element, then add value for paragraph element by using innerHTML method. finally, use the appendChild method to add the element to the body tag.
<!DOCTYPE html>
<html>
<head>
<title>Learn Share IT - Add Element to body tag in JavaScript</title>
<style>
* {font: 18px Lora;}
position:absolute;
width:100%;
height:100%;
opacity:0.3;
z-index:100;
background:#000;
</style>
</head>
<body>
<h1>The Document Object</h1>
<h2>The createElement() Method and The appendChild() method</h2>
<p>Add paragraph element to the body tag:</p>
</body>
<script>
let addelement2body = () => {
const element = document.createElement('p');
element.innerHTML = "This is the paragraph: Welcome to LearnShareIT";
document.body.appendChild(element);
}
// Call function to add paragraph element into the body tag
addelement2body();
</script>
</html>Output:
The Document Object
The createElement() Method and The appendChild() method
Add paragraph element to the body tag:
This is the paragraph: Welcome to LearnShareITUsing the insertAdjacentHTML() method
The insertAdjacentHTML() method inserts HTML code into a specified position.
After begin
After end
Before begin
Before end
Syntax:
element.insertAdjacentHTML(position, HTML)
Or
node.insertAdjacentHTML(position, HTML)
Parameters:
- Position: a position relative to the element.
- HTML: the HTML code to insert.
Example:
In this example, we create the function addelement2body() very easy by using insertAdjacentHTML method to add directly paragraph element at the end of body.
<!DOCTYPE html>
<html>
<body>
<h2>The insertAdjacentHTML() Method</h2>
<p>Create a button element:</p>
</body>
<script>
function addelement2body() {
window.document.body.insertAdjacentHTML( 'afterend',
'<p>This is the paragraph: Welcome to LearnShareIT</p>')
}
// Call function to add paragraph element into the body tag
addelement2body();
</script>
</html>Output:
The insertAdjacentHTML() Method
Create a button element:
This is the paragraph: Welcome to LearnShareITSummary
In this tutorial, we have explained how to insert an element into the body tag in JavaScript by using createElement() and appendChild() method and using insertAdjacentHTML() method. We always hope this tutorial is helpful to you. Leave your comment here if you have any questions or comments to improve the article. Thanks for your read.
Maybe you are interested:
- Append text to an Element using JavaScript
- Set the “disabled” Attribute using JavaScript
- Get an Element by Name attribute using JavaScript
My name is Fred Hall. My hobby is studying programming languages, which I would like to share with you. Please do not hesitate to contact me if you are having problems learning the computer languages Java, JavaScript, C, C#, Perl, or Python. I will respond to all of your inquiries.
Name of the university: HUSC
Major: IT
Programming Languages: Java, JavaScript, C , C#, Perl, Python
