Как использовать (запускать) class в цикле

Внесу некоторые изменения в вопрос, опишу поподробнее....
Коллеги, есть такой вот пример. В котором я создаю class CreateBlockInfo. не думаю что надо объяснять, что именно происходит в данном классе.
let info = document.querySelectorAll('.info'); class CreateBlockInfo { constructor(elem) { this.fragment = document.createDocumentFragment(); this.element = document.createElement(elem); } Append(parent) { this.fragment.appendChild(this.element); parent.appendChild(this.fragment) } } //Потом создаю экземпляр класса runCreateBlockInfo let runCreateBlockInfo = new CreateBlockInfo('span'); // и вот далее я пытаюсь запустить экземпляр класса в цикле // я хочу в каждый элемент info вставить созданный span for (let i = 0; i < info.length; i++) { runCreateBlockInfo.Append(info[i]); } // рузультат такой, только в последний элемент info вставляется span console.log(info[0].childNodes); console.log(info[1].childNodes); console.log(info[2].childNodes);

Я прекрасно понимаю, что если в цикл создавать новый объект
for (let i = 0; i < info.length; i++) { let runCreateBlockInfo = new CreateBlockInfo(); runCreateBlockInfo.Append(info[i]); }
То я получу, то чего хочу.
Но, тут есть одно НО... Простите за выражение, нутром чую, что это не верно. Так как я создаю один и тот же Объект несколько раз. А мне кажется, что надо один раз проинициализировать новый объект. А потом использовать его сколько душе угодно.
Коллеги, вопрос - верно ли мои умозаключения выше и если да, как выйти из ситуации???
Или может я не верное рассуждаю? Помогите разобраться.

Ответ

Метод .appendChild не создает новый элемент. Если элемент уже есть на странице, то он перенесется из одного места, в другое.
Чтобы решить это, можно создавать элемент span каждый раз, либо клонировать тот, который создан в конструкторе, например:
let info = document.querySelectorAll('.info'); class CreateBlockInfo { constructor(elem) { this.fragment = document.createDocumentFragment(); this.element = document.createElement(elem); } Append(parent) { this.fragment.appendChild(this.element.cloneNode()); parent.appendChild(this.fragment) } } //Потом создаю экземпляр класса runCreateBlockInfo let runCreateBlockInfo = new CreateBlockInfo('span'); // и вот далее я пытаюсь запустить экземпляр класса в цикле // я хочу в каждый элемент info вставить созданный span for (let i = 0; i < info.length; i++) { runCreateBlockInfo.Append(info[i]); } // рузультат такой, только в последний элемент info вставляется span console.log(info[0].childNodes); console.log(info[1].childNodes); console.log(info[2].childNodes); span::before { content: "span" }