javascript - 使用insertAdjacentHTML在元素前后插入html内容，为何未能包裹住该元素？

问题描述

问 题

我想给一个元素增加一个a标签做它的父节点（用a标签包裹该元素），使用insertAdjacentHTML方法未能达到目标，求解是什么原因，以及如何解决？（浏览器chrome 55）

代码如下：

<div id="a">aaaaaaaaa</div>
<script type="text/javascript">
    // 给元素增加一个a标签做父节点
    var a=document.querySelector("#a");
    a.insertAdjacentHTML("beforebegin","<a href='' >");
    a.insertAdjacentHTML("afterend","</a>");
</script>

我想要的效果是：

<a href="">
    <div id="a">aaaaaaaaa</div>
</a>

结果出来的效果是：

<a href=""></a>
<div id="a">aaaaaaaaa</div>

我试过将a标签换成div、给div#a增加父元素等方法，均未有改变。求解

参考：
insertAdjacentHTML的文档

我之前在其他一些论坛看到用insertAdjacentHTML插入html片段的代码，现在我这样不行了，我猜测是不是现在浏览器里实现的insertAdjacentHTML必须是一个完整的元素（标签）了？不能再将元素拆分成两部分插入了？

解决方案

文档写到插入的是生成的节点

insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将生成的节点插入到指定位置的DOM树中。

jQuery可以用.wrap()方法

或者

function (toWrap, wrapper) {
  if (toWrap.nextSibling) {
    toWrap.parentNode.insertBefore(wrapper, toWrap.nextSibling)
  } else {
    toWrap.parentNode.appendChild(wrapper)
  }
  return wrapper.appendChild(toWrap)
}

wrap(document.querySelector("#a"), document.createElement('a'))

这篇关于javascript - 使用insertAdjacentHTML在元素前后插入html内容，为何未能包裹住该元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！