Изменить тип элемента, но сохранить атрибут класса и текстовое содержимое

Question

Я хотел бы заменить свой элемент тега без потери класса. Например, я хотел бы заменить все свои <span class="vc_tta-tab.vc_active"> на <h2 class="vc_tta-tab.vc_active">

Я использую этот скрипт, но он меняет только первого ребенка и не сохраняет класс.

  function replaceElement(source, newType) {
    // Create the document fragment
    const frag = document.createDocumentFragment();

// Fill it with what's in the source element
    while (source.firstChild) {
      frag.appendChild(source.firstChild);
    }
    
    // Create the new element
    const newElem = document.createElement(newType);
    // Empty the document fragment into it
    newElem.appendChild(frag);

    // Replace the source element with the new element on the page
    source.parentNode.replaceChild(newElem, source);
  }
 
  // Replace the <span> with a <h2>
  replaceElement(document.querySelector('span.vc_tta-title-text'), 'h2');

<div class="vc_tta-tabs-container">
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab=""><a href="#1570001325623-19515f51-28e7" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">CONTRIBUTI E BORSE DI STUDIO</span></a></li>

<li class="vc_tta-tab" data-vc-tab=""><a href="#1570001325641-ed1b27e5-545c" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">BORSE DI STUDIO ITACA INPS</span></a></li>

<li class="vc_tta-tab" data-vc-tab=""><a href="#1570001476621-8f5ad27d-ca8a" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">PROTEZIONE ANNULLAMENTO</span></a></li>
</ul>
</div>

<style>
h2 {color:red;}
</style>

Можете ли вы помочь мне использовать скрипт для замены всего моего селектора на весь дочерний?

Answer 1

Небольшое изменение в коде @Rory [Динамически извлекать и добавлять класс в элемент span]

$('span.vc_tta-title-text').replaceWith(function(index, text, e) {
   return `<h2 class="${this.className}">${$(this).text()}</h2>`
});

h2 { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vc_tta-tabs-container">
  <ul class="vc_tta-tabs-list">
    <li class="vc_tta-tab vc_active" data-vc-tab="">
      <a href="#1570001325623-19515f51-28e7" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text">CONTRIBUTI E BORSE DI STUDIO</span>
      </a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#1570001325641-ed1b27e5-545c" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text">BORSE DI STUDIO ITACA INPS</span>
      </a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#1570001476621-8f5ad27d-ca8a" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text hh">PROTEZIONE ANNULLAMENTO</span>
      </a>
    </li>
  </ul>
</div>

Answer 2

Этого можно добиться в jQuery, предоставив replaceWith() функцию, которая возвращает новый элемент <h2> для вставки в DOM. Попробуйте это:

$('span.vc_tta-title-text').replaceWith(function() {
  return `<h2 class="vc_tta-title-text">${$(this).text()}</h2>`;
});

h2 { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vc_tta-tabs-container">
  <ul class="vc_tta-tabs-list">
    <li class="vc_tta-tab vc_active" data-vc-tab="">
      <a href="#1570001325623-19515f51-28e7" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text">CONTRIBUTI E BORSE DI STUDIO</span>
      </a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#1570001325641-ed1b27e5-545c" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text">BORSE DI STUDIO ITACA INPS</span>
      </a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#1570001476621-8f5ad27d-ca8a" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text">PROTEZIONE ANNULLAMENTO</span>
      </a>
    </li>
  </ul>
</div>

Такой же подход в простой JS:

document.querySelectorAll('span.vc_tta-title-text').forEach(function(el) {
  var h2 = document.createElement('h2');
  h2.textContent = el.textContent;
  h2.className = el.className;
  el.insertAdjacentElement('afterend', h2);
  el.remove();
});

h2 { color: red; }

<div class="vc_tta-tabs-container">
  <ul class="vc_tta-tabs-list">
    <li class="vc_tta-tab vc_active" data-vc-tab="">
      <a href="#1570001325623-19515f51-28e7" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text">CONTRIBUTI E BORSE DI STUDIO</span>
      </a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#1570001325641-ed1b27e5-545c" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text">BORSE DI STUDIO ITACA INPS</span>
      </a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#1570001476621-8f5ad27d-ca8a" data-vc-tabs="" data-vc-container=".vc_tta">
        <span class="vc_tta-title-text">PROTEZIONE ANNULLAMENTO</span>
      </a>
    </li>
  </ul>
</div>