javascript - 替换对 DOM 对象的引用

Question

我想编写一个 Javascript 函数，将一个 DOM 元素替换为另一个元素。我还需要对旧元素的引用在替换后指向新元素。

为此，我编写了以下函数：

var replaceDomElement = function (el1, el2) {
    var parent = el1.parentNode;
    if (!parent) return false;

    parent.replaceChild(el2, el1);

    el1 = el2;
    return true;
}

但这并不按我想要的方式工作。DOM 元素被正确替换。

但声明el1 = el2不起作用。执行此函数后，el1 仍指向旧元素，即现在没有父元素。

在函数内更改对 DOM 对象的引用的正确方法是什么？

Answer 1

以下代码可以按您的意愿工作：

var replaceDomElement = function (el1, el2) {
    var parent = el1.parentNode;
    if (!parent) return false;

    parent.replaceChild(el2, el1);

    return el2;
}

var element1 = document.getElementById("el1");
var element2 = document.getElementById("el2");
element1 = replaceDomElement(element1, element2);
alert(element1 === element2);

即最后element1 等于element2。不同之处在于您返回 el2。这是一个显示示例http://codepen.io/krasimir/pen/LcyFe的 codepen