HTML DOM insertAdjacentHTML() Method
Example
Insert a new <p> element after the header element:
var h = document.getElementById("myH2");
h.insertAdjacentHTML("afterend",
"<p>My new paragraph</p>");
Try it Yourself »
Definition and Usage
The insertAdjacentHTML() method inserts a
text as HTML, into a specified position.
Legal position values are:
"afterbegin"
"afterend"
"beforebegin"
"beforeend"
Browser Support
The numbers in the table specify the first browser version that fully supports the method.
| Method | |||||
|---|---|---|---|---|---|
| insertAdjacentHTML() | 1 | 4 | 8 | 4 | 7 |
Syntax
node.insertAdjacentHTML(position, text)
Parameter Values
| Parameter | Type | Description |
|---|---|---|
| position | String | Required. A position relative to the element. Legal values: "afterbegin" - After the beginning of the element (as the first child) "afterend" - After the element "beforebegin" - Before the element "beforeend" - Before the end of the element (as the last child) |
| text | String | The text you want to insert |
More Examples
Example
Using the "afterbegin" value:
h.insertAdjacentHTML("afterbegin", "<span style='color:red'>My span</span>");
Try it Yourself »
Example
Using the "beforebegin" value:
h.insertAdjacentHTML("beforebegin", "<span style='color:red'>My span</span>");
Try it Yourself »
Example
Using the "beforeend" value:
h.insertAdjacentHTML("beforeend", "<span style='color:red'>My span</span>");
Try it Yourself »
