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);我＆＃ 39;改变了你的第二个jsfiddle，看一看。

Answer 2

问题是你使用完全相同的元素，只能放在一个地方......

如果你克隆它，那不应该是一个问题。 Here's your second fiddle正如您所写的那样deepCopy function from this answer：

adjacentInsert.insertAtBegin(deepCopy(span1));

函数来镜像insertAdjacentHTML

2 个答案: