Замена тега с сохранением классов

Question

Подскажите пожалуйста, можно ли как-нибудь поменять тег с сохранением классов и атрибутов? Поменять тег replaceWith я знаю, а вот как при этом сохранить содержимое? Например :

<button class="product" id="product" data-product="product"> 
</button>

Answer 1

Можно так:

const button = document.querySelector('#product');
const input = document.createElement('input');

for (const { name, value } of button.attributes) {
  input.setAttribute(name, value);
}

button.replaceWith(input);

console.log(input.outerHTML);

<button class="product" id="product" data-product="product"> 
</button>

Answer 2

let button = document.querySelector("button");
let span = document.createElement("span");

function fReplaceWithAttr(source, target) {
  [...source.attributes].forEach(attr => {
    target.setAttribute(attr.nodeName, attr.nodeValue)
  });
  target.innerHTML = source.innerHTML;
  target.className = source.className;
  source.replaceWith(target);
  return target;
}

console.log(fReplaceWithAttr(button, span).outerHTML);

<button class="product tri" id="product" data-product="product">56</button>

БЛОГ НА HUSL

Замена тега с сохранением классов

Ответы (2 шт):