Потеря ссылки на элементы DOM после того, как я их клонирую

Question

Используя MooTools, я кэширую некоторые элементы DOM в переменных, когда DOM готов, например:

var mc = $('main-content'),
    bg = $('bg'),
    arrows = $$('arrows');

И bg, и arrows расположены в элементе mc DOM. Я хочу клонировать узел mc, выполнить на нем некоторые операции и затем вставить клон в DOM:

function updateDOM (parent) {
    var parentID = parent.id,
        oldNode = document.getElementById(parentID),
        clone = oldNode.cloneNode(true);

    // work with clone

    oldNode.parentNode.replaceChild(clone, oldNode);

}

Когда я запускаю updateDOM(mc), я обнаруживаю, что любые другие последующие функции, которые могут изменить mc, bg или arrows, не работают. Когда я выполняю console.log (), элементы отображаются, но они не отражают изменений, внесенных с момента их инициализации.

Учитывая, что я клонирую элемент, для меня имеет смысл, что mc больше не ссылается на div#main-content. updateDOM() - это функция, которая может использоваться любым элементом. Неужели мне нужно жестко написать способ повторного создания каждой кешируемой переменной или есть более динамичный способ сделать это?

Answer 1

> function updateDOM (parent) {
>     var parentID = parent.id,
>         oldNode = document.getElementById(parentID),
>         clone = oldNode.cloneNode(true);

Может быть, я толстый, но мне кажется, что вышеуказанной функции передается ссылка на элемент, который назначен parent . Затем он использует getElementById(parent.id), чтобы получить ссылку на тот же элемент, а затем клонировать его. Чем это отличается от:

function updateDOM (parent) {
    var clone = parent.cloneNode(true);

Answer 2

Измените updateDOM, чтобы вернуть новый клонированный узел, и просто измените ваши вызовы на updateDOM, чтобы также переназначить переменную.

mc = updateDOM(mc);