Estoy tratando de agregar texto a un elemento existente usando textContent . Pero cuando uso el operador += (asignación de adición) pero en el resultado, las etiquetas ya existentes como b han perdido su efecto. Creo que solo lo estoy agregando, pero también tiene efecto en el contenido anterior. ¿Alguien puede explicar por qué? Revisé los documentos pero no encontré nada al respecto.
HTML:
<div id="divA">Something<b>bold</b></div>JS
const some = document.getElementById("divA"); some.textContent += "Hi"; // This results in : "Something boldHi" without the bolded formatting. some.textContent = some.textContent + "Hi"; //This too results in the same!¡Gracias por adelantado!
El valor .textContent de un elemento devuelve exactamente eso: el contenido del texto , que es texto sin formato, no el marcado HTML de los contenidos.
Si lo haces
some.textContent += "Hi"Se recuperará el contenido de texto del contenedor, que no contendrá ninguna etiqueta, por ejemplo
<div id="divA">Something<b>bold</b></div>recuperará:
Something bold Concatenar en eso y luego asignar el resultado nuevamente al .textContent del elemento da como resultado que los descendientes del elemento se reemplacen con un solo nodo de texto , donde el valor del nodo de texto es el valor asignado.
Si usa .innerHTML += en su lugar, se conservará el marcado HTML anterior de los descendientes, pero todos los descendientes se volverán a analizar de acuerdo con el marcado HTML asignado, por lo que se perderán los detectores de eventos y las cosas relacionadas que dependen de los elementos DOM. . Una mejor opción es usar .insertAdjacentHTML , que no requiere volver a analizar los descendientes.
Una opción aún mejor sería agregar un nodo en sí mismo en lugar de intentar escribir marcado HTML (que es potencialmente inseguro), por ejemplo
some.appendChild(document.createTextNode('Hi'))Cuando esté tomando el textContent de texto, obtendrá Somethingbold , que es solo texto sin etiquetas HTML
console.log(some.textContent); // Somethingbold Está agregando textContent , en su lugar debe usar innerHTML
const some = document.getElementById("divA"); some.innerHTML += "Hi"; // This results in : "Something boldHi" without the bolded formatting. some.innerHTML = some.innerHTML + "Hi"; //This too results in the same! <div id="divA">Something<b>bold</b></div>