一直是向dom中追加元素的操作就是,createElement 、appendChild等, 知道發現了更加靈活、方便的 insertAdjacentHTML
一、功能
insertAdjacentHTML() 可以將文本解析成 Element 元素，並將結果節點追加到DOM樹指定位置，它不會重新解析它正在使用的元素，因此它不會破壞元素內的現有元素。這避免了額外的序列化步驟，使其比直接使用innerHTML操作更快
二、語法
element.insertAdjacentHTML(position, text);
position是指添加到哪個位置 ，並且必須是以下字符串之一：
- beforebegin: 元素自身的前面
- afterbegin: 插入元素內部的第一個子節點之前
- beforeend: 插入元素內部的最后一個子節點之后
- afterend: 元素自身的后面
text是要被解析為HTML或XML元素，並插入到DOM樹中的字符串
三、示例及效果圖
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <div id="box"> 12 <div>最開始的一句話</div> 13 </div> 14 </body> 15 16 <script> 17 var str1 = '<div>beforebegin - 插入到元素自身的前面</div>'; 18 var str2 = '<div>afterbegin - 插入元素內部的第一個子節點之前</div>'; 19 var str3 = '<div>beforeend - 插入元素內部的最后一個子節點之后</div>'; 20 var str4 = '<div>afterend - 元素自身的后面</div>'; 21 var box = document.querySelector('#box'); 22 box.insertAdjacentHTML('beforebegin', str1); 23 box.insertAdjacentHTML('afterbegin', str2); 24 box.insertAdjacentHTML('beforeend', str3); 25 box.insertAdjacentHTML('afterend', str4); 26 </script> 27 28 </html>
效果圖：
