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