theme: channing-cyan
这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战
今天我们说一下插入标记，我们熟悉的插入有innerHTML，其实还有几种和他类似的方法，我们展开说一下。
插入标记
我们之前用的api大多数都是获取元素内容，HTML5规范中定义了一个向标签元素内添加内容的方法。
innerHTML
innerHTML是向元素内插入一个字符串，注释或者文本标记，它会根据现在提供的内容重新渲染到DOM树上，替代之前元素包含的所有节点。
代码语言：javascript复制<p id="username" data-name="jackson">我是Jackson</p>
const name = document.querySelector('#username');
name.innerHTML = 'bear';
这里我们可以看到它确实被替换成了bear，注意是替换，并不是向后添加。
outerHTML
outerHTML是直接替换这个元素，新的内容直接替换旧的内容
代码语言：javascript复制<p id="username" data-name="jackson">我是Jackson</p>
const name = document.querySelector('#username');
let p = "<p>我是大熊G </p>";
name.outerHTML = p;
这里我们看到整个标签都被替换掉了。
insertAdjacentHTML()和inserAdjacentText()
这俩个方法都接受俩个参数，第一个参数是固定的，必须是以下4中类型
"beforebegin"，插入当前元素前面，作为前一个同胞节点；
"afterbegin"，插入当前元素内部，作为新的子节点或放在第一个子节点前面；
"beforeend"，插入当前元素内部，作为新的子节点或放在最后一个子节点后面；
"afterend"，插入当前元素后面，作为下一个同胞节点
他们的第二个参数就和我们上面innerHTML和outerHTML中需要的属性一样了，我这里写一个方式吧。
代码语言：javascript复制 // 作为前一个同胞节点插入
name.insertAdjacentHTML("beforebegin", "<p>jackson!!!</p>");
name.insertAdjacentText("beforebegin", "jackson!!!"); 
我们上面代码示例就是作为前一个同胞节点插入。大家也可以看到页面确实显示了我的名字。
性能问题
我们虽然这样操作的话会比我们修改HTML中的内容方便，但是我们修改的内容如果还有其他绑定js事件或者操作，就会导致内存占用比较大，我们在用的时候一定要注意被替换的元素上所关联的js事件。
还有一个就是不要用循环来替换或者添加元素，这样每次是通过先获取再添加，也会占据很大的性能。
跨站脚本
这里必须提到跨站脚本攻击，我们比如有input输入框，里面需要用户输入内容，里面可能有其他不法分子通过给input框输入<script>....</script>,里面可能写一些烂七八糟的内容导致我们页面程序瘫痪。我们在用innerHTML的时候一定要进行转义或者隔离插入的数据。
