HTMLElement: insertAdjacentHTML() method
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTMLThe
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.The insertAdjacentHTML() method parses the text as HTML or XML into an element element, and inserts the resulting node into the specified position in the DOM tree . It doesn't reparse the element it's using, so it doesn't destroy existing elements inside the element. This avoids an extra serialization step, making it faster than operating directly with innerHTML.
grammar
insertAdjacentHTML(position, text)
Copy to Clipboard
parameter
position （新增的元素定位）
Taking the current element as a reference, there are a total of the following 4 positions where elements can be inserted, which are divided into 2 categories, one is to add inside the current element (as a son), and the other is to add outside the element (as a neighbor). The following 4 are represented as strings:
"beforebegin"
In front of the element. Valid when the current element is in the DOM tree and has a parent element.
"afterbegin"
The starting position inside the element is added, that is, after insertion, it is used as the first child element of the current element.
"beforeend"
Added after the last element inside the element. That is, after insertion, it is used as the last child element of the current element. .
"afterend"
Add after the current element. It is valid when the current element is in the DOM tree and has a parent element.
(Location diagram)
text
The second parameter: text: string text, which is parsed into HTML or XML and inserted into the DOM tree at the corresponding position.
return value
empty (undefined)
Exceptions
This method may raise a DOMException of one of the following types:
NoModificationAllowedError DOMException
Thrown if position is "beforebegin" or "afterend" and the element either does not have a parent or its parent is the Document object.
SyntaxError DOMException
Thrown if position is not one of the four listed values.
Description
The insertAdjacentHTML() method does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.
We can visualize the possible positions for the inserted content as follows:
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
Safety Note:
When inserting HTML into a page using insertAdjacentHTML(), be careful not to use unescaped user input.
insertAdjacentHTML() should not be used when inserting plain text. Instead, use the Node.textContent property or the Element.insertAdjacentText() method. This doesn't interpret the passed content as HTML, but inserts it as raw text.
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
code{
color:red
}
</style>
<script>
window.onload = function() {
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>
</head>
<body>
<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>
</body>
</html>
running result:
beforebegin
afterbegin
beforeend:
afterend
