JS学习37：insertAdjacentHTML/insertAdjacentElement/insertAdjacentText

古城微笑少年丶 2022-07-15 11:16 131阅读 0赞

# 1、插入Element #

在js中，最常用的插入Element方法有`appendChild`和`insertBefore`，用法为：

// appendChild // parentElement.appendChild(childElement); var oBody = document.querySelector("body"); var oA = document.createElement("a"); oA.href = "1.html"; oA.innerHTML = "hello world!"; oBody.appendChild(oA); // insertBefore // parentElement.insertBefore(childElement, positionElement); var oB = document.createElement("b"); oB.style.color = "red"; oB.innerText = 'bbbbb'; oBody.insertBefore(oB, oA);

`appendChild`：在父级元素内追加新元素。

`insertBefore`：在父级元素内的某个元素之前插入新元素。

在执行上述代码之后，页面的代码为：

<body> <b style="color: red;">bbbbb</b> <a href="1.html">hello world!</a> </body>

由`appendChild`和`insertBefore`能够扩展出如`prependChild`、`insertAfter`等函数，最著名的jquery就是这么做的，相关操作DOM方法有：

$().append(); $().prepend(); $().before(); $().after(); $().appendTo(); $().prependTo(); $().insertBefore(); $().insertAfter();

jquery的这些方法，都可以接收元素对象、或者是HTML字符串，非常的方便。而js原生的`appendChild`和`insertBefore`只能接收元素对象，每次要插入新的元素，都要执行`document.createElement`方法，非常的复杂。

# 2、insertAdjacentHTML #

insertAdjacentHTML解决了上述的不便，它的作用比appendChild和insertBefore强大，语法格式为：

element.insertAdjacentHTML(position, text);

position可以取4个值：

*  `beforebegin`：在元素的开始位置之前插入。
 *  `beforeend`：在元素的结束位置之前插入。
 *  `afterbegin`：在元素的开始位置之后插入。
 *  `afterend`：在元素的结束位置之后插入。

元素的位置参考示意图：

![20131202143206.png][]

兼容性为：

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; color:rgb(51,51,51); font-family:'Microsoft Yahei'; font-size:14px; line-height:24px"> 
 <tbody style=""> 
  <tr style=""> 
   <th style="padding:0px">Feature</th> 
   <th style="padding:0px">Chrome</th> 
   <th style="padding:0px">Firefox (Gecko)</th> 
   <th style="padding:0px">Internet Explorer</th> 
   <th style="padding:0px">Opera</th> 
   <th style="padding:0px">Safari (WebKit)</th> 
  </tr> 
  <tr style=""> 
   <td style="padding:0px">Basic support</td> 
   <td style="padding:0px">1.0</td> 
   <td style="padding:0px">8.0 (8.0)</td> 
   <td style="padding:0px">4.0</td> 
   <td style="padding:0px">7.0</td> 
   <td style="padding:0px">4.0 (527)</td> 
  </tr> 
 </tbody> 
</table>

第1例说的`appendChild`和`insertBefore`，可以改写为：

// appendChild // parentElement.insertAdjacentHTML("beforeend", text); var oBody = document.querySelector("body"); oBody.insertAdjacentHTML('beforeend', '<a id="js-a" href="1.html">hello world!</a>'); // insertBefore // parentElement.insertAdjacentHTML("beforebegin", text); var oA = document.querySelector("#js-a"); oA.insertAdjacentHTML("beforebegin", "<b style='color:#f00;'>bbbbb</b>");

关于insertAdjacent...的方法还有insertAdjacentElement和insertAdjacentText，其作用显而易见：

*  `insertAdjacentElement`：插入DOM对象。
 *  `insertAdjacentText`：插入纯文本。

三个方法合起来就和jquery操作DOM的方法类似了。

# 3、参考资料 #

*  [http://javascript.ruanyifeng.com/dom/basic.html\#toc13][http_javascript.ruanyifeng.com_dom_basic.html_toc13]
 *  [https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML][https_developer.mozilla.org_en-US_docs_Web_API_Element.insertAdjacentHTML]
 *  [http://msdn.microsoft.com/en-us/library/ie/ms536452(v=vs.85).aspx][http_msdn.microsoft.com_en-us_library_ie_ms536452_v_vs.85_.aspx]

[20131202143206.png]: http://qianduanblog.com/uploads/2013/12/20131202143206.png
[http_javascript.ruanyifeng.com_dom_basic.html_toc13]: http://javascript.ruanyifeng.com/dom/basic.html#toc13
[https_developer.mozilla.org_en-US_docs_Web_API_Element.insertAdjacentHTML]: https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML
[http_msdn.microsoft.com_en-us_library_ie_ms536452_v_vs.85_.aspx]: http://msdn.microsoft.com/en-us/library/ie/ms536452%28v=vs.85%29.aspx