小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
今天我们来复习最后一个关于DOM操作的API，insertAdjacentHTML()，用来将HTML插入到页面中。同样还有两个差不多的方法，insertAdjacentElement()和insertAdjacentText()，他们的用法差不多，只是第二个参数有些区别。
语法
insertAdjacentHTML() 是 Element 接口的一个方法，任何元素都可以调用。
insertAdjacentHTML() 方法解析一段 HTML 文本并将结果节点插入到 DOM 树的指定位置。
element.insertAdjacentHTML(positionName, text);
1) position
positionName 是一个字符串，表示相对于元素的位置。 positionName 接受以下四个值之一：
'beforebegin': 在元素之前'afterbegin': 在元素的第一个子元素之前'beforeend': 在元素的最后一个子元素之后'afterend': 在元素之后
注意，'beforebegin'和'afterend'仅在元素位于 DOM 树中并且具有父元素时才可用。
insertAdjacentHTML() 方法没有返回值。
下面代码注释说明了每个参数所在的位置
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
2) text
text 参数是一个字符串，insertAdjacentHTML() 方法将其解析为 HTML，和innerHTML差不多。
安全问题
与innerHTML 一样，如果需要把用户输入传递到insertAdjacentHTML() 方法中，则应始终对其进行转义来避免安全风险。
使用例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>insertAdjacentHTML() Demo</title>
</head>
<body>
<ul id="list">
<li>CSS</li>
</ul>
<script>
let list = document.querySelector('#list');
list.insertAdjacentHTML('beforebegin', '<h2>Web 前端必备技能</h2>');
list.insertAdjacentHTML('afterbegin', '<li>HTML</li>');
list.insertAdjacentHTML('beforeend', '<li>JavaScript</li>');
list.insertAdjacentHTML('afterend', '<p>更多知识等你学习</p>');
</script>
</body>
</html>
输出的HTML结构为
<h2>Web 前端必备技能</h2>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>更多知识等你学习</p>
最后
这个方法可能使用的比较少，大家有用过这个方法吗？
如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新
