JavaScript insertAdjacentHTML（）的使用

时间 2019-11-07

标签 javascript insertadjacenthtml 使用栏目 JavaScript 繁體版

原文原文链接

含义：javascript

insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会从新解析它正在使用的元素，所以它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操做更快。

用法：

 1 element.insertAdjacentHTML(position, text);

名词解释：css

　　　　1.element:目标元素；html

　　　　2.insert:插入；java

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

　　　　4.HTML:你们用的html布局；spa

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

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

position有四个参数选项：对象

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

　　　　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效率更高，兼容性更好