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

Question

[Кристина]

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

И так вертела, и сяк, не могу сообразить) 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);
  }

}

Answer 1

[Stalker_RED]

Вы указываете insertBefore какой DOM-элемент взять и куда вставить.
И если вам нужно вставить несколько копий - нжно каждый раз создавать копию.

Сейчас у вас получает так:
1. со страрта создается копия (в конструкторе)
2. вставляется куда-то
3. убирается с того места(2) и вставлется в другое
4. убирается с того места(3) и вставлется в другое
5. убирается с того места(4) и вставлется в другое
...

Comments

[Кристина]

Stalker_RED Спасибо! А то не понимала механизм точный. Еще и невнимательность моя, вроде сохраняла клон в методе, но вставляла в итоге this.clone)))

Answer 2

[0xD34F]

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

Comments

[Кристина]

0xD34F Спасибо огромное!)

Answer 3

[Владимир Проскурин]

Я бы лучше сделал шаблон (строку с исходным html кодом блока). И при нажатии добавить, создавал бы элемент по этой строке.
Пример

Comments

[Кристина]

Владимир Проскурин Т.е. по тому же принципу клонировать весь мой код в новую обертку и вставлять? Просто у меня там 200+ строк html.

[Stalker_RED]

Кристина, тогда попробуйте insertAdjacentHTML, он самый быстрый из всех методов вставки, емнип.

[Владимир Проскурин]

Кристина, да. html код не надо совать в js строкой, это я для примера показал. Куда лучше использовать тег для шаблонов

<script type="text/template" id="item-template">
	<div>тут много элементов</div>
</script>

(он не будет отображаться на странице). И вот так получать эту строку шаблона

var tmp = document.getElementById('item-template').innerHTML

пример
Еще круто использовать шаблонизаторы olado.github.io/doT тогда можно будет в шаблоне просто подставлять переменную
<div>{{=prop}}</div>
использовать циклы, условия, инклуды и.т.д.

[Кристина]

Stalker_RED, О, у него вариантов вставки побольше! Спасибо, потренируюсь с ним!

[Владимир Проскурин]

Кристина, он как раз лучше подходит для вставки шаблона, т.к. не нужно создавать отдельный div

[Кристина]

Владимир Проскурин, Я поняла, ты хочешь, чтобы я сошла с ума))) Мне бы это в голове удержать нормально, шаблонизаторы меня добъют. Я просто js синтаксисом ещё не уверенно пользуюсь. Я понимаю, что это упрощает всё и облегчает поддержку но... Буду изучать азы!)

А так, спасибо за наводку, буду эксперементировать, интересное решение!

[Владимир Проскурин]

Кристина, шаблонизатор потом, когда настанет время, когда ты сама поймешь что тебе такой инструмент нужен. Просто знай, что он есть. А сейчас используй строки (в шаблонах или в обычных строках), так удобнее, чем копировать html. Со временем может случится так, что тебе в калькуляторе нужно будет динамически добавлять новые элементы (например в списки), и удалять их, и это все будет клонировано в новый блок, который по плану должен быть с "чистого листа". Когда у тебя есть независимый шаблон, легче изменять его.