插入标记
1、innerHTML
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
但是不同的浏览器返回的字符串不一样
使用innerHTML属性也有限制：
在大多数浏览器中innerHTML插入<script>标签并不会执行其中的脚本，但是在IE8更早的版本只要满足在
1、<script defer></script> 有defer属性
2、<script>标签必须在块级元素之后，<script>被认为是‘无作用域的元素’，也就是在页面中看不到元素，与<style>元素和注释一样
div.innerHTML = "_<script defer>console.log(1);<\/script>";//在<script>前添加一个文本元素 div.innerHTML = "<div></div><script defer>console.log(1);<\/script>";//添加块级元素 div.innerHTML = "<input type=\"hidden\"><script defer>console.log(1);<\/script>";//或添加input，隐藏的input不影响布局
标准浏览器下不能执行
<style>标签也不是一个没有作用域的标签，因此必须在前面添加一个有作用域的的元素即块级元素
并不是所有的元素支持innerHTML的元素：
<col> <colgroup> <framset> <head> <html> <style> <table> <tbody> <thead> <tfoot> <tr>
IE8以前，<title>元素没有innerHTML属性
2、outerHTML
obj.outerHTML 返回的是包括obj在内的所有的子元素
3、insertAdjacentHTML()方法
插入标记的最后一个新增的方法
insertAdjacentHTML(someWhere,contentext)方法
（1）beforebegin 在当前元素之前插入一个紧邻的同辈元素
（2）afterbegin 在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
（3）beforeend 在当前的元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素
（4）afterend 在当前元素之后插入一个紧邻的同辈元素
<body>
<div id='div1' style='width:200px;height:300px;border:1px red solid;'>
<span style='background:yellow'>test</span>
</div>
<script>
var oDiv = document.getElementById('div1');
oDiv.insertAdjacentHTML('beforebegin','<span>klkx1</span>');//在同级元素标签之前插入
oDiv.insertAdjacentHTML('afterbegin','<h3>klkx2</h3>');//在当前元素插入一个新的子元素，或在第一个子元素之前插入一个新的元素
oDiv.insertAdjacentHTML('beforeend','<h2>klkx3</h2>');//在当前元素插入一个子元素，或在最后一个子元素之后插入一个新的元素
oDiv.insertAdjacentHTML('afterend','<p>klkx4</p>');//在当前的元素的后面插入一个同级元素
</script>
</body>
4、性能问题
for循环尽量不要循环一次添加一次节点，会消耗内存，而是把所有的要插入的节点字符串赋值给一个变量，再统一插入到节点中
5、scrollIntoView()方法
alignToTop一个Boolean值：
如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
<body style='height:8000px'>
<a onclick='fn()'>click</a>
<div id='div2' style='width:300px;height:200px;border:1px black solid;'></div>
<div id='div1' style='width:200px;height:300px;border:1px red solid;'>
<span style='background:yellow'>test</span>
</div>
<script>
var oDiv = document.getElementById('div1');
function fn(){
oDiv.scrollIntoView(true);
}
</script>
</body>
