- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在已经存在的HTML页面中插入一段HTML代码。
## 语法
```js
element.insertAdjacentHTML(position, text);
```
`position`
- `'beforebegin'`：元素自身的前面。
- `'afterbegin'`：插入元素内部的第一个子节点之前。
- `'beforeend'`：插入元素内部的最后一个子节点之后。
- `'afterend'`：元素自身的后面。
`text`
- 要插入的HTML代码
# 实例
```js
const frontmatterEl = document.querySelector(".frontmatter");
frontmatterEl.insertAdjacentHTML(
"afterend",
`
<div style="display: flex; justify-content: end; gap: 3px;">
<a href="#${created}" class="tag" target="_blank" rel="noopener">
Created:${created}
</a>
<a href="#${updated}" class="tag" target="_blank" rel="noopener">
Updated:${updated}
</a>
</div>
`
);
```
# 相关内容
比[[js DOM 修改内容 innerHTML属性]]能够更快的添加HTML标签；[[js DOM 创建HTML标签creatElement]]更适合添加一个元素，并对其进行操作和设置。
# 参考资料
[insertAdjacentHTML-MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML)