Hola, agradezco cualquier ayuda que pueda obtener con esto, ya que todavía estoy aprendiendo JavaScript.
Tengo algo de HTML en el que estoy tratando de insertar etiquetas de intervalo específicas. He encontrado respuestas que le permiten simplemente reemplazar el HTML interno, sin embargo, el contenido que estoy tratando de envolver es ligeramente diferente en cada página para la que estoy tratando de lograr esto, pero la estructura HTML es la misma.
Aquí está el HTML actual, frente a lo que me gustaría que fuera:
<div class="list-view__count"> <p> Showing 1 - 18 of 46 results </p> </div>Y lo que me gustaría agregar:
<div class="list-view__count" content="nosnippet"> <p> <span data-nosnippet>Showing 1 - 18 of 46 results</span> </p> </div>Probé varios códigos y agregué con éxito la sección content="nosnippet",
document.querySelector(".list-view__count ").setAttribute("content", "nosnippet")pero la etiqueta parece que no puedo entender cómo se hace todavía.
Cualquier ayuda será apreciada.
Salud
prueba algo como
var div = document.getElementById('list-view__count'); var x = document.creatElement('span'); var text = document.createTextNode('text here'); x.appendChild(text) div.appendChild(x)<p> con textContent , guardarlo en una variable, luego crear una etiqueta de intervalo y establecer el texto en <span> con el mismo método.data... sin un valor como ese, pero funcionalmente debería ser el mismo. const div = document.querySelector(".list-view__count"); const p = document.querySelector(".list-view__count>p"); const pText = p.textContent; const span = document.createElement("span"); div.setAttribute("content", "nosnippet") p.textContent = ''; span.textContent = pText; span.setAttribute("data-nosnippet", '') p.appendChild(span); console.log(document.querySelector(".wrap").outerHTML) <div class="wrap"> <div class="list-view__count"> <p> Showing 1 - 18 of 46 results </p> </div> </div>Puede seleccionar el elemento p que es el hijo inmediato de su div, seleccionar su HTML interno (lo hice por si acaso tenía alguna marca HTML para que se conserve), borrar el HTML interno del elemento p y luego agregar un elemento span que tiene el conjunto de atributos de datos y el HTML interno copiado de la página original.
const p = document.querySelector('.list-view__count > p'); const pInner = p.innerHTML; p.innerHTML = ''; const span = document.createElement('span'); span.innerHTML = pInner; span.setAttribute('data-nosnippet', ''); p.append(span); <div class="list-view__count"> <p> Showing 1 - 18 of 46 results </p> </div>