javascript - 镜像insertAdjacentHTML的函数

我正在尝试编写一个函数来镜像insertAdjacentHTML dom方法Element.insertAdjacentHTML，在这里

function insertAdjacent(targetElement) {
'use strict';
return {
    insertAfter: function (newElement, targetElement) {
        var parent = targetElement.parentNode;
        if (parent.lastChild === targetElement) {
            parent.appendChild(newElement);
        } else {
            parent.insertBefore(newElement, targetElement.nextSibling);
        }
    },

    insertAtBegin: function (newElement) {
        var fChild = targetElement.firstChild;
        if (!fChild) {
            targetElement.appendChild(newElement);
        } else {
            targetElement.insertBefore(newElement, fChild);
        }
    },

    insertAtEnd: function (newElement) {
        var lChild = targetElement.lastChild;
        if (!lChild) {
            targetElement.appendChild(newElement);
        } else {
            this.insertAfter(newElement, targetElement.lastChild);
        }
    }
};
}

当您在开头和结尾插入两个不同的元素节点时，该功能运行良好，如here所示。但是问题出在我尝试在here所示的开头和结尾插入相同的元素节点时。它仅在结尾处插入元素节点，而不是在开头和结尾处都插入。
是什么导致此问题？谢谢

最佳答案

因为一个element不能同时插入两个位置，所以如果要执行此操作，请在每个函数的第一行添加newElement = newElement.cloneNode(true);。我已经更改了第二个jsfiddle，请看一下。