revision:
The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.
insertAdjacentHTML(position, text)
Parameters:
position : a string representing the position relative to the element. Must be one of the following strings:
"beforebegin" : before the element. Only valid if the element is in the DOM tree and has a parent element.
"afterbegin" : just inside the element, before its first child.
"beforeend" : just inside the element, after its last child.
"afterend" : after the element. Only valid if the element is in the DOM tree and has a parent element.
text : the string to be parsed as HTML or XML and inserted into the tree.
<button onclick="myFunction()">Insert</button>
<p>Click "Insert" to insert a paragraph after the header.</p>
<h2 id="myH2">My Header</h2>
<script>
function myFunction() {
const h2 = document.getElementById("myH2");
let html = "<p>My new paragraph.</p>";
h2.insertAdjacentHTML("afterend", html);
}
</script>
Some text, with a code-formatted element inside it.
<div>
<select id="position">
<option>beforebegin</option>
<option>afterbegin</option>
<option>beforeend</option>
<option>afterend</option>
</select>
<button id="insert">Insert HTML</button>
<button id="reset">Reset</button>
<p>
Some text, with a <code id="subject">code-formatted element</code> inside it.
</p>
</div>
<style>
code {color: red;}
</style>
<script>
const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
const subject = document.querySelector("#subject");
const positionSelect = document.querySelector("#position");
subject.insertAdjacentHTML(
positionSelect.value,
"<strong>inserted text</strong>"
);
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
document.location.reload();
});
</script>
Click "Insert" to insert a span inside the header:
<div>
<button onclick="insertFunction()">Insert</button>
<p>Click "Insert" to insert a span inside the header:</p>
<h4 id="myH4">My Header</h4>
</div>
<script>
function insertFunction() {
const h4 = document.getElementById("myH4");
let html = "<span style='color:red'>My span</span>";
h4.insertAdjacentHTML("afterbegin", html);
}
</script>
Click "Insert" to insert a span before the header:
<div>
<button onclick="insertFunction2()">Insert</button>
<p>Click "Insert" to insert a span before the header:</p>
<h4 id="myH42">My Header</h4>
</div>
<script>
function insertFunction2() {
const h4 = document.getElementById("myH42");
let html = "<span style='color:red'>My span</span>";
h4.insertAdjacentHTML("beforebegin", html);
}
</script>
Click "Insert" to insert a span inside the header:
<div>
<button onclick="insertFunction3()">Insert</button>
<p>Click "Insert" to insert a span inside the header:</p>
<h4 id="myH43">My Header</h4>
</div>
<script>
function insertFunction3() {
const h4 = document.getElementById("myH43");
let html = "<span style='color:red'>My span</span>";
h4.insertAdjacentHTML("beforeend", html);
}
</script>