JavaScript insertAdjacentHTML（）的使用

程序员文章站 2022-04-21 18:21:46

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

含义：

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:规定在目标元素的外部结束位置插入。

弄个图会更清晰点：

JavaScript insertAdjacentHTML（）的使用

重点注意：该方法会将指定的文本解析为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>

实际效果：

JavaScript insertAdjacentHTML（）的使用