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

Question

我想给一个元素增加一个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必须是一个完整的元素（标签）了？不能再将元素拆分成两部分插入了？

Answer 1

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

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'))

Answer 2

你要a里面append一个div当然是用afterbegin啦

Answer 3

遇到了同样的问题，应该不是不能嵌套，而是 HTML的嵌套解析规则导致 的，如：A 标签嵌套其他的标签会被浏览器解析 自动添加结束符

解析前：

<a href="www.a.com">Git<a href="www.b.com">Seg</a></a>

解析后：

<a href="www.a.com">Git</a><a href="www.b.com">Seg</a>