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>