javascript - 镜像 insertAdjacentHTML 的函数

Question

我正在尝试编写一个函数来镜像 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 .它只在末尾插入元素节点，而不是在开头和结尾都插入。是什么导致了这个问题？谢谢

Answer 1

因为一个 element 不能同时插入到两个地方，如果你想这样做，在每个函数的第一行，添加 newElement = newElement.cloneNode(true ); 我已经修改了你的第二个 jsfiddle ，看看。