I would like to replace my tag element without lost the class. For example, I would like to replace all my <span class="vc_tta-tab.vc_active"> with <h2 class="vc_tta-tab.vc_active">
I'm using this script but it change only the first child and don't keep the class.
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>Can you help me to use a script to replace all my selector with all child?