在使用原生js编写项目时，有时需要对dom进行操作，下面说一下几个较新且好用的api。

insertAdjacentHTML

再指定元素的指定位置插入内容

// 在指定元素的指定位置插入内容
const app = document.querySelector('#app');
// 元素开始标签前（元素外部）
app.insertAdjacentHTML('beforebegin', '<h1>beforebegin</h1>')
// 元素结束标签前（元素内部）
app.insertAdjacentHTML('beforeend', '<h1>beforeend</h1>')
// 元素开始标签后（元素内部）
app.insertAdjacentHTML('afterbegin', '<h1>afterbegin</h1>')
// 元素结束标签后（元素外部）
app.insertAdjacentHTML('afterend', '<h1>afterend</h1>')
app.insertAdjacentElement
app.insertAdjacentText

// 结果
// <h1>beforebegin</h1>
// <div id="app">
//   <h1>afterbegin</h1>
//   app
//   <h1>beforeend</h1>
// </div>
// <h1>afterend</h1>

insertAdjacentElement、insertAdjacentText和insertAdjacentHTML使用方法相同，只是一个插入元素，一个插入文字。