Как продублировать содержимое элемента?

Question

[test096]

Есть элементы:

<button class="btn"><span>кнопка</span></button>
<button class="btn"><span>кнопка 2</span></button>
<button class="btn"><span>кнопка 3</span></button>

Надо продублировать их внутреннее содержимое, чтобы стало так:

<button class="btn"><span>кнопка</span><span>кнопка </span></button>
<button class="btn"><span>кнопка 2</span><span>кнопка 2</span></button>
<button class="btn"><span>кнопка 3</span><span>кнопка 3</span></button>

let btns = Array.from(document.querySelectorAll('.btn'));
btns.forEach(function(item, index) {
  // как это сделать?
})

Answer 1

[0xD34F]

const duplicateContent = el =>

  // можно добавить копии вложенных узлов
  el.append(...el.cloneNode(true).childNodes);

  // или добавить копию разметки
  // el.insertAdjacentHTML('beforeEnd', el.innerHTML);

  // или перезаписать разметку в удвоенном виде
  // el.innerHTML += el.innerHTML;
  // el.innerHTML = el.innerHTML.repeat(2);
  // el.innerHTML = Array(3).join(el.innerHTML);
  // el.innerHTML = String.prototype.concat.apply('', Array(2).fill(el.innerHTML));
  // el.innerHTML = el.innerHTML.replace(/.+/, '$&$&');
  // el.innerHTML = /(.+)/.exec(el.innerHTML).join``;

document.querySelectorAll('.btn').forEach(duplicateContent);

// или

for (const n of document.getElementsByClassName('btn')) {
  duplicateContent(n);
}

Comments

[test096]

0xD34F. не совсем это имелось ввиду. Чтобы дублировался спан который есть в кнопке. По загрузке страницы

[0xD34F]

test096, что спросили, то и ответил - span'ы дублируются.

Answer 2

[Сергей Соколов]

Element.cloneNode(true) копирует элемент и всё внутри:

Comments

[test096]

Сергей Соколов. не совсем это имелось ввиду. Чтобы дублировался спан который есть в кнопке. По загрузке страницы