The insertAdjacentHTML method of the Element interface takes the provided text and transforms it into HTML or XML, subsequently placing the resulting nodes into the Document Object Model (DOM) at a specified location.
To embed text in an HTML document at a specific location within the DOM, you can utilize the insertAdjacentHTML method. This approach allows for the modification or addition of HTML text seamlessly.
Syntax
The syntax presented below illustrates the method along with its corresponding parameter in depth.
Node.insertAdjacentHTML(position, text);
Parameters
The following two parameters, along with their subdivisions, illustrate the applications of the work method.
1) position
a string that specifies the position of the element in relation to the string. It has to be one of the strings mentioned below:
i) "beforebegin"
Utilize "beforebegin" prior to the element. This condition holds true only if the element has a parent element and exists within the DOM tree.
ii) "afterbegin"
The "afterbegin" position is utilized right after the first child of the specified element.
iii) "beforeend"
The term "beforeend" is utilized directly following the last child of the element.
iv) "afterend"
The "afterend" position is applicable for the function following the element. This condition holds true only when the element possesses a parent element and is part of the DOM tree.
2)text
The content will be transformed into HTML or XML format and integrated into the tree structure.
Return Value
The webpage reflecting the specified modification will be provided. There are four potential values for the legal position.
Examples
The illustrations demonstrate various functions performed with the method utilizing both position and text.
Example1
The subsequent program demonstrates the utilization of the afterbegin position in conjunction with particular text by employing the JavaScript insertAdjacentHTML method. In this context, we can implement straightforward positioning along with text.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 250px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Online Portal </h3>
<h2> Example ! </h2>
<h4 id = "maindata">
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
var datas = document.getElementById("maindata");
//use the afterbegin position for text
datas.insertAdjacentHTML("afterbegin",
"<span style = 'color:grey; " +
"background-color: yellow; " +
"width: 50%;'> You Can Learn </span>");
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("afterbegin",
"<span style = 'color : grey; " +
"background-color: yellow; " +
"width: 50%;'> Welcome to </span>");
}
</script>
</body>
</html>
Output
The data inserted using the afterbegin method into the webpage is depicted in the image below.
Example2
The subsequent program demonstrates the utilization of the afterend position in conjunction with particular text by employing the JavaScript insertAdjacentHTML method.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 250px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Online Portal </h3>
<h2 id = "maindata"> C# Tutorial ! </h2>
<h4>
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
var datas = document.getElementById("maindata");
//use the afterend position for text
datas.insertAdjacentHTML("afterend",
"<center> <span style = 'color :navy; " +
"background-color : yellow; " +
"width: 50%;'> You Can Learn </span> </center>");
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("afterend",
"<center> <span style = 'color : navy; " +
"background-color : orange; " +
"width: 50%;'> Welcome to </span> </center>");
}
</script>
</body>
</html>
Output
The data inserted at the afterend position within the web page is illustrated in the image below.
Example3
The program presented below employs the beforebegin position alongside designated text by utilizing the JavaScript insertAdjacentHTML function.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 250px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Online Portal </h3>
<h2 id = "maindata1"> C# Tutorial ! </h2>
<h4 id = "maindata">
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
var datas = document.getElementById("maindata");
//use beforebegin position for text
datas.insertAdjacentHTML("beforebegin",
"<center> <span style = 'color :navy; " +
"background-color : yellow; " +
"width: 50%;'> You Can Learn </span> </center>");
var datas3 = document.getElementById("maindata1");
datas3.insertAdjacentHTML("beforebegin",
"<center> <span style = 'color : navy; " +
"background-color : aqua; " +
"width: 50%;'> of </span> </center>");
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("beforebegin",
"<center> <span style = 'color : navy; " +
"background-color : orange; " +
"width: 50%;'> Welcome to </span> </center>");
}
</script>
</body>
</html>
Output
The data that is inserted into the web page using the beforebegin method is illustrated in the image below.
Example4
The subsequent code utilizes the beforeend position alongside designated text through the JavaScript insertAdjacentHTML function.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 200px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Welcome To Online Portal </h3>
<h2 id = "maindata"> C# Tutorial ! </h2>
<h4 id = "value">
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
var datas = document.getElementById("maindata");
//use beforeend position for text
datas.insertAdjacentHTML("beforeend",
"<center> <span style = 'color :navy; " +
"background-color : yellow; " +
"width: 50%;'> You Can Learn </span> </center>");
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("beforeend",
"<center> <span style = 'color : navy; " +
"width: 50%;'> Of </span> </center>");
}
</script>
</body>
</html>
Output
The data inserted using the beforeend method into the webpage is illustrated in the image below.
Example5
The program outlined below demonstrates the utilization of the JavaScript insertAdjacentHTML function to insert specified text at various positions.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript insertAdjacentHTML() Method
</title>
<style>
h3, h2 {
color: blue;
text-align: center;
}
h4 {
color: red;
text-align: center;
}
div {
width: 50%;
height: 250px;
border: 2px solid red;
padding: 8px;
</style>
</head>
<body>
<div>
<h3 id = "data"> Online Portal </h3>
<h2 id = "maindata1"> C# Tutorial ! </h2>
<h4 id = "maindata">
JavaScript insertAdjacentHTML() Method
</h4>
</div>
<br>
<button onclick = "myData()"> Click Here.! </button>
<script>
function myData() {
//use beforeend position for text
var datas = document.getElementById("maindata1");
datas.insertAdjacentHTML("beforeend",
"<center> <span style = 'color :green; " +
"width: 50%; font-size : 10px;'> Mode:website (reading) </span> </center>");
//use the afterbegin position for text
var datas = document.getElementById("maindata");
datas.insertAdjacentHTML("afterbegin",
"<center> <span style = 'color :navy; " +
"background-color : yellow; " +
"width: 50%;'> You Can Learn </span> </center>");
//use the afterend position for text
var datas3 = document.getElementById("data");
datas3.insertAdjacentHTML("afterend",
"<center> <span style = 'color : navy; " +
"background-color : aqua; " +
"width: 50%;'> of </span> </center>");
//use beforebegin position for text
var datas2 = document.getElementById("data");
datas2.insertAdjacentHTML("beforebegin",
"<center> <span style = 'color : navy; " +
"background-color : orange; " +
"width: 50%;'> Welcome to </span> </center>");
}
</script>
</body>
</html>
Output
The illustration presents details regarding the JavaScript method known as insertAdjacentHTML.
Supported Browsers
The following browsers and their versions are supported by DOM insertAdjacentHTML Method in Javascript:
- Google Chrome 1.0 version
- Edge 17.0 version
- Internet Explorer 4.0 version
- Firefox 8.0 version
- Opera 8.0 version
- Safari 4.0 version
Conclusion
The JavaScript method insertAdjacentHTML is utilized within web pages as part of the document object model. This method allows for the insertion of one or several pieces of text through a function or event. It positions the inserted content in various locations and formats. By doing so, it enhances user interactivity and effectively conserves data storage in a compact manner.