insertAdjacentHTML/insertAdjacentElement/insertAdjacentText

最新推荐文章于 2021-10-31 13:20:01 发布

gyldzh

最新推荐文章于 2021-10-31 13:20:01 发布

阅读量614

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

7 篇文章 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：在元素的结束位置之后插入。

元素的位置参考示意图：

兼容性为：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	8.0 (8.0)	4.0	7.0	4.0 (527)

第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、参考资料

gyldzh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
insertAdjacentHTML/insertAdjacentElement/insertAdjacentText

1、插入Element在js中，最常用的插入Element方法有appendChild和insertBefore，用法为：// appendChild// parentElement.appendChild(childElement);var oBody = document.querySelector("body");var oA = document.createElement("
复制链接

扫一扫