更改元素类型，但保留class属性和文本内容

Question

我想在不丢失类的情况下替换我的标记元素。例如，我想用<h2 class="vc_tta-tab.vc_active">替换我所有的<span 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

在jQuery中，您可以通过向replaceWith()提供一个函数来实现这一点，该函数返回要插入到DOM中的新<h2>元素。试试这个：

​

$('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>

​

Answer 2

只需对@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>

​