Как скоппировать элемент, а не перенести его?

Рейтинг: 0Ответов: 1Опубликовано: 23.02.2023

На странице есть несколько svg элементов. Метод, по-задумке, должен был собрать их в единый svg элемент. Не собранные элементы передаются методу в качестве аргументов.

До того как передать элементы в качестве аргументов, они собираются со страницы с помощью getElementsByClass.

Проблема в том, что когда я все же собираю элементы в единый - они пропадают со своего старого места на странице. Как вместо переноса элемента сделать его копирование в этом случае?

class Icon {
    constructor(layers) {
        this.layers = [];
    }

    render(whereTo, bg, dec, cont, size="480x480") {
        this.layers[0] = bg;
        this.layers[1] = dec;
        this.layers[2] = cont;
        const renderSizes = size.split('x');
        const renderIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        renderIcon.setAttribute('height', renderSizes[0]);
        renderIcon.setAttribute('width', renderSizes[1]);
        renderIcon.setAttribute('viewBox', '0 0 16 16');
        for (let i=0; i<this.layers.length; i++) {
            renderIcon.appendChild(this.layers[i].firstElementChild.firstElementChild);
        }
        whereTo.appendChild(renderIcon);
    }

const freshIcon = new Icon;
const previewZone = document.querySelector('.preview');
const getLayers = Array.from(document.getElementsByClassName('bg-component'));
freshIcon.render(previewZone, getLayers[0], getLayers[1], getLayers[2]);

Ответы

▲ 0Принят

Воспользуйтесь функцией cloneNode()

https://developer.mozilla.org/ru/docs/Web/API/Node/cloneNode