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

#javascript #классы #ecmascript_6

  Внесу некоторые изменения в вопрос, опишу поподробнее....


Коллеги, есть такой вот  пример. В котором я создаю 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]);
}


То я получу, то чего хочу.

Но, тут есть одно  НО...  Простите за выражение, нутром чую, что это не верно.
Так как я создаю один и тот же Объект несколько раз.  А мне кажется, что надо один
раз проинициализировать новый объект. А потом использовать его сколько душе угодно.

Коллеги, вопрос -  верно ли мои умозаключения выше и если да, как выйти из ситуации???

Или может я не верное рассуждаю?  Помогите разобраться.
    

Ответы

Ответ 1

Метод .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"
}