1

Cómo puedo añadir texto al div sin que elimine la etiqueta span, he intentado de dos formas y no logro añadir el texto sin que se borre el span.

let message = document.querySelector(".message");

// REMUEVE LA ETIQUETA SPAN
//message.innerText = "Continuar";

// AÑADE EL TEXTO DESPUES DEL SPAN
//message.innerText += "Continuar";
<div class="message">Cambiar texto<span>-></span></div>

3 respuestas 3

1

Analizando el elemento con la clase message veo que está compuesto de dos nodos hijos:

childNodes: [object NodeList] {
  0: [object Text] { ... },
  1: [object HTMLSpanElement] { ... },

por lo tanto, si apuntamos al primero de ellos mediante la propiedad de lectura childNodes y su número de índice (el 0 en este caso), combinada con la propiedad textContent entonces el segundo (el span) queda inalterable.

Ejemplo:

let message = document.querySelector(".message");
message.childNodes[0].textContent = "Continuar"
<div class="message">Cambiar texto<span>-></span></div>

Otra solución a este caso específico

Volviendo a analizar el elemento, veo que también, en este caso, podemos utilizar la propiedad firstChild, pues en su estructura aparece esto:

      firstChild: [circular object Text],
      firstElementChild: [circular object HTMLSpanElement] :

por lo tanto, también así funcionaría:

let message = document.querySelector(".message");
message.firstChild.textContent = "Continuar"
<div class="message">Cambiar texto<span>-></span></div>

3
  • Muy interesante solución como siempre masterguru Commented el 13 oct. 2022 a las 5:18
  • @LuisS.Romero jeje, bueno, ha sido suerte :-) He puesto un console.log(message) para que me escupiera todo el objeto (2374 líneas) y luego he buscado span por ahí y lo he encontrado de ese modo y pam, se me encendió la bombilla :-) Un placer verte activo, saludos!
    – masterguru
    Commented el 13 oct. 2022 a las 5:21
  • Tremendoooo jajaja (2374 líneas explotó mi cabeza). Ha sido un placer también volver a cruzar letras, saludos! Commented el 13 oct. 2022 a las 5:23
1

Puedes usar la propiedad innerHTML en lugar de innerText, y así conservar el span

message.innerHTML = "Continuar<span>-></span>";

1

Una opción que además te daría independencia del texto frente al segundo span es usar 2 span que son elementos inline, esto te permitiría usar diferentes etiquetas, diferentes formatos, de forma muy sencilla.

Quedando en HTML:

<div><span class="message">Cambiar texto</span><span>-></span></div>

Quedando en JS:

let message = document.querySelector(".message");
message.textContent = "hola";

El problema es que innerText o innerHTML sobreescriben el contenido del div padre que es el elemento capturado.


Notas de laboratorio:

// REMUEVE LA ETIQUETA SPAN
//message.innerText = "Continuar";

Esto reemplaza todo el contenido del div, por lo que desaparece el <span>.

// AÑADE EL TEXTO DESPUES DEL SPAN
//message.innerText += "Continuar";

Esto es el contenido que tiene o sea el texto + span + "Continuar", ya que a += b en este caso actúa igual que a = a + b

Ten presente que al usar una clase en el querySelector solo te traerá el primer elemento con esa clase, si se desea que afecte a varios elementos deberás usar querySelectorAll, lo que devuelve un array que posteriormente podrás recorrer y hacer lo que desees con cada elemento en cada iteración.

En caso de que el objetivo sea seleccionar un único elemento, una alternativa podría ser seleccionar por id usando querySelector("#id") o getElementById("id").

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.