Tengo varios elementos con la etiqueta y quiero cambiarlos todos a una etiqueta. así que voy así:
document.getElementsByTagName("h1")[0].setAttribute("id", "author-name"); var elem=document.getElementById("author-name"); var parent=elem.parentNode; var newElement=document.createElement("span"); newElement.textContent=elem.textContent; newElement.id=elem.id; parent.replaceChild(newElement, elem); var replacementTag = 'span'; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Text txt</h1> <h1>Text txt</h1> <h1>Text txt</h1> </body> </html>Selecciono la etiqueta, le doy una identificación y, según la identificación, reemplazo toda la etiqueta. Pero su ejecución sólo una vez. ¿Cómo cambiar el código para poder ejecutarlo a través de todas las etiquetas disponibles?
Intenté hacer algo así, pero esto no funcionó:
var replacementTag = 'span'; //start loop $('h1').each(function() { var outer = this.outerHTML; // Replace tag open var regex = new RegExp('<' + this.tagName, 'i'); var newTag = outer.replace(regex, '<' + replacementTag); // Replace tag close regex = new RegExp('</' + this.tagName, 'i'); newTag = newTag.replace(regex, '</' + replacementTag); $(this).replaceWith(newTag); });¿Puede alguien ayudarme? Si es posible, muestre la solución dentro de un fragmento
ty
Este es muy corto (probado):
$('h1').each(function(){ $(this).replaceWith($('<p>' + this.innerHTML + '</p>')); });Si ignora los atributos potenciales, simplemente puede reemplazarlos y contener el contenido correcto usando .innerHTML en lugar de .textContent .
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
PD: No es necesario usar jQuery...
const elements = document.querySelectorAll('h1'); elements.forEach(h1 => { const span = document.createElement('span'); span.innerHTML = h1.innerHTML; h1.replaceWith(span); }); <h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1>Con jQuery prueba esto..
$(document).ready(function(){ $("button").click(function(){ $("h1").each(function( index ){ value = $(this).val() $(this).unwrap().wrap('<pre/>'); $(this).attr("id",index+1); }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body> <button>Alert the value of each list item</button> <h1>Text txt</h1> <h1>Text txt</h1> <h1>Text txt</h1> </body> </html>