Cómo cambiar el nombre de la etiqueta HTML en JavaScript

Parece que está tratando de reemplazar un nodo con otro nodo mientras conserva el contenido.

Usar innerHTML es probablemente una mala idea. Se perderán todos los oyentes de eventos que haya configurado. Cualquier propiedad de expansión o estilo dinámico en cualquier elemento DOM también se perderá. También significa que estás invocando el analizador HTML, que es completamente innecesario.

En su lugar, use un fragmento de documento.

Este es un elemento

función replaceElement (source, newType) {
// Crea el fragmento de documento
const frag = document.createDocumentFragment ();
// Llénalo con lo que hay en el elemento fuente
while (source.firstChild) {
frag.appendChild (source.firstChild);
}
// Crea el nuevo elemento
const newElem = document.createElement (newType);
// Vaciar el fragmento de documento en él
newElem.appendChild (frag);
// Reemplace el elemento fuente con el nuevo elemento en la página
source.parentNode.replaceChild (newElem, source);
}

// Reemplace el con un

replaceElement (document.querySelector (‘b’), ‘div’);

La transferencia de atributos del elemento original al nuevo se deja como ejercicio para el lector.

replaceElement con objeto Range: .selectNodeContents () и .extractContents (): Este texto debe ser verde

< / div>

función replaceElement (fuente, nombre de etiqueta) {
var rango = document.createRange ();
elemento var = document.createElement (nombre de etiqueta);
range.selectNodeContents (fuente);
element.appendChild (range.extractContents ());
source.parentNode.replaceChild (elemento, fuente);
}

replaceElement (document.querySelector ('. replaceElement> div'), 'section');
replaceElement (document.querySelector ('. replaceElement b'), 'u');

quizás depende de en qué punto necesita cambiar la etiqueta. Podría considerar usar un marco de plantillas que genere dinámicamente su nodo ANTES de que llegue al DOM. Pero si está cambiando algo (tal vez desde la entrada del usuario) para causar el cambio de etiqueta, entonces probablemente deba reemplazar el nodo en cuestión y volver a vincular cualquier evento al nuevo reemplazo.

Puede eliminar una etiqueta y reemplazarla por otra (suponiendo que sea sintácticamente correcto tener esa etiqueta allí), pero no puede cambiar el nombre de una etiqueta.

Eso sería como cambiar un zapato por un sombrero con solo llamarlo sombrero 😉

Realmente puede cambiar el nombre de un marcado html. Lo mejor que puede hacer es eliminar la etiqueta, guardar el contenido de la etiqueta en una variable y crear una nueva etiqueta para que se complete con los datos en la variable que creó anteriormente. Espero que esto haya sido útil