Как вставить клонированный блок несколько раз?

Если делаю клонирование в методе, а не в конструкторе, то он копирует текущую версию, естественно, а мне нужно исходную, т.к. перед тем как нажать добавить, контент может меняться пользователем.

И так вертела, и сяк, не могу сообразить) https://codepen.io/anon/pen/KGRxyW?editors=1010

let wrap = document.querySelector('.wrap');

document.addEventListener('DOMContentLoaded', ()=>{
  let clone = new Clone(wrap);
});

class Clone {
  constructor(wrap){
    this.wrap = wrap;
    this.clone = wrap.querySelector('.clone').cloneNode(true);
    this.index = 1;
    this.beforeInsert = wrap.querySelector('.before');
    let btn = wrap.querySelector('.add');
    btn.addEventListener('click', () => this.add());
  }

  add(){
    this.clone.classList.add(`new${this.index++}`);
    this.wrap.insertBefore(this.clone, this.beforeInsert);
  }

}
  • Вопрос задан
  • 612 просмотров
Решения вопроса 3
Stalker_RED
@Stalker_RED
Вы указываете insertBefore какой DOM-элемент взять и куда вставить.
И если вам нужно вставить несколько копий - нжно каждый раз создавать копию.

Сейчас у вас получает так:
1. со страрта создается копия (в конструкторе)
2. вставляется куда-то
3. убирается с того места(2) и вставлется в другое
4. убирается с того места(3) и вставлется в другое
5. убирается с того места(4) и вставлется в другое
...
Ответ написан
0xD34F
@0xD34F Куратор тега JavaScript
add() {
  const clone = this.clone.cloneNode(true);
  clone.classList.add(`new${this.index++}`);
  this.wrap.insertBefore(clone, this.beforeInsert);
}
Ответ написан
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Я бы лучше сделал шаблон (строку с исходным html кодом блока). И при нажатии добавить, создавал бы элемент по этой строке.
Пример
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы