JavaScript insertAdjacentHTML（）的使用

含义：

insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。
 
用法：
 1 element.insertAdjacentHTML(position, text);

 

名词解释：

　　　　1.element:目标元素；

　　　　2.insert:插入；

　　　　3.Adjacent: 与…毗连的; 邻近的；

　　　　4.HTML:大家用的html布局；

　　　　

　　　　text:一段字符串，此方法会将其解析为节点对象，然后插入目标元素指定位置；

　　　　positon:规定被插入的位置的关键字；

 

position有四个参数选项：

　　　　1.beforebegin:规定在目标元素的外部开始位置插入。

　　　　2.afterbegin:规定在目标元素的内部开始位置插入。

　　　　3.beforeend:规定在目标元素的内部结束位置插入。

　　　　4.afterend:规定在目标元素的外部结束位置插入。

 

弄个图会更清晰点：

 

 

 

重点注意：该方法会将指定的文本解析为HTML或XML（也就是说标签会被解析）

 

实例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             #bluerec {
 8                 width:200px;
 9                 height:150px;
10                 background-color:blue;
11             }
12             p {
13                 width:100px;
14                 height:80px;
15                 background-color:red;
16             }
17         </style>
18     </head>
19     <body> 
20     <br />
21         <hr />
22         <div id = "bluerec"></div>
23         <br /> 
24         <input id = "s" type = "button" value = "点击插入"/>
25         
26         <script type="text/javascript">
27             window.onload = function(){
28                 var blueRec = document.getElementById("bluerec");    
29                 var btn = document.getElementsByTagName("input")[0];
30                 var str = "<p></p>";
31                 btn.onclick = function(){
32                     blueRec.insertAdjacentHTML("beforebegin",str);
33                 }
34             }
35         </script>
36     </body>
37 </html>

 

实际效果：

 

 

 

 

 

 对上述代码的解析：

　　　　1.初始状态：一条分割线、蓝色div、按钮

　　　　2.点击按钮后：在蓝色div上插入了p标签，取代了分割线的位置，分割线位置上移

 

使用场景：需要在原有元素周围追加元素时，比起innerHTML效率更高，兼容性更好

posted on 2019-11-07 18:42  一棵青木  阅读(2576)  评论(1)    收藏  举报