Cambiar el texto de un Div usando Javascript

1. Cambiar el texto div utilizando el atributo innerHTML
2. Cambiar el contenido de un Div con el atributo de nodo textContent
3. HTML interno versus “contenido de texto” Aspecto de seguridad
4. Cambiar el texto div usando el pseudo elemento :after

Los elementos div no son interactivos por naturaleza. Javascript le infunde vida haciéndolo interactivo. Es posible que necesitemos reformular el texto mostrado por un div. Por ejemplo, al implementar una función Editar, podemos reutilizar las pantallas diseñadas para desarrollar la función Agregar. Solo es necesario cambiar la redacción. En cuanto a la funcionalidad Agregar, es posible que necesitemos reformular la palabra clave Agregar de un botón a Actualizar y así sucesivamente. Veamos algunas formas en las que podemos cambiar el texto de un div de forma dinámica.

Cambiar el texto div utilizando el atributo innerHTML

A diferencia de otros lenguajes de programación, no usamos métodos getter y setter para establecer un texto en elementos HTML. El objeto de elemento HTML para un div tiene un atributo llamado innerHTML. Podemos usarlo para obtener y establecer el contenido del objeto HTML. Aquí el objeto HTML estará activo. Es decir, refleja cualquier cambio en la propiedad del elemento en el navegador al actualizar.

A continuación se muestra la sintaxis para usar innerHTML.

var text = htmlElement.innerHTML;
htmlElement.innerHTML = 'New Text';

En el fragmento de código anterior, obtenemos el contenido de un elemento HTML div usando el htmlElement.innerHTML. Aquí, el htmlElement es el objeto HTML real. Del mismo modo, podemos establecer el contenido en un div utilizando el mismo atributo, el innerHTML del elemento. Simplemente asignamos el contenido del texto al innerHTML.

• uso:

<div id="div-element">Hey there!!</div>

window.onload = function() {
  document.getElementById('div-element').innerHTML = 'Hello World!!';
  console.log(document.getElementById('div-element').innerHTML);
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!';
  console.log(document.getElementById('div-element').innerHTML);
}

Producción :

Hello World!!
Hello bunny!!

Antes de aplicar el .innerHTML, debemos seleccionar el elemento HTML. Podemos hacerlo de varias formas. Javascript tiene muchas funciones que podemos usar para consultar elementos del DOM. A continuación se muestran algunos de los métodos más utilizados.

• getElementById(): Esta función de la interfaz documento se utiliza para seleccionar un elemento del DOM utilizando su id, especificado en el HTML. La función devuelve el objeto HTML correspondiente al elemento seleccionado.
• getElementsByClassName: Podemos consultar el elemento basado en el nombre de clase css con la función getElementsByClassName. Este método javascript devuelve más de un elemento como un array de objetos HTML.
• getElementsByName: Existe otra forma de seleccionar los elementos con el atributo name. Especificamos el atributo de nombre para el nodo en HTML. Este método devuelve un array de objetos HTML. Podemos usarlo, especialmente si estamos interesados ​​en seleccionar múltiples elementos con un estilo específico, clase CSS y actuar sobre ellos todos de una vez.
• getElementsByTagName: También podemos seleccionar elementos basados ​​en sus etiquetas HTML usando la función getElementsByTagName. Por ejemplo, podemos realizar algunas operaciones en todos los elementos div en una sección de DOM, etc. Como sugiere el nombre, la función devuelve un array de objetos HTML.
• querySelector: La función querySelector de Javascript es un poco más genérica y se puede utilizar para seleccionar elementos HTML con la consulta css. La función devuelve el primer elemento que satisface la condición pasada en su parámetro.
• querySelectorAll: Este es similar al querySelector, con la única diferencia de que devolverá más de un elemento que satisfaga el formato de consulta css pasado como parámetro.

Cambiar el contenido de un Div con el atributo de nodo textContent

Aunque usamos el innerHTML con bastante frecuencia, existe un riesgo de seguridad involucrado en su uso. Está relacionado con cómo el innerHTML reemplaza el contenido del elemento HTML. El atributo innerHTML elimina todos los subnodos HTML de una sola vez y agrega el nuevo contenido asignado en él.

El riesgo de seguridad viene dado que el atributo innerHTML nos permite insertar cualquier fragmento de código HTML, incluso si es un código dañino. Discutiremos este aspecto en la siguiente sección. MDN recomienda usar node.textContent para cambiar el texto de un elemento. Reemplaza los nodos secundarios dentro del HTML con el text que asignamos en el parámetro textContent. Consulte el siguiente código para comprender el uso.

<div id="div-element">Hey there!!</div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!'
}

Producción :

Hello bunny!!

Aquí, seleccionamos el elemento HTML, div, antes de cambiar el texto. Usamos la función getElementById() para consultar el elemento del DOM. Luego usamos el textContent para cambiar el texto del div. Este cambio no se distinguirá cuando se cargue la pantalla. Tan pronto como el navegador cargue la página web, se ejecutará la función window.onload y se producirá el cambio de texto. Entonces, el usuario final siempre ve el texto más nuevo. El cambio del texto antiguo a nuevo no es evidente en la carga de la pantalla. También podemos jugar con el textContent dentro del método setTimeOut para ver el cambio.

HTML interno versus “contenido de texto” Aspecto de seguridad

El atributo innerHTML difiere del textContent. Ambos atributos toman text como entrada pero, ¿cuál es la vulnerabilidad de seguridad aquí? En el innerHTML, es posible agregar código malicioso. Consulte el siguiente fragmento de código. Aquí, el cambio se refleja y el código innerHTML se ejecutará. Como se muestra en el siguiente fragmento de código, al hacer clic en el elemento HTML div de color verde claro, aparece una alerta no deseada en la pantalla.

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.innerHTML =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

Si asignamos el mismo contenido en textContent para el elemento div, no lo representará como un elemento HTML. Javascript muestra el contenido como texto en la pantalla. Así que podemos ver literalmente el <div style =" altura: 20px; fondo: verde claro "onclick =" alerta ('¡Peligro!') "> Mostrado como texto en la página web. Este aspecto hace que el código sea más seguro y confiable. Por lo tanto, si pretendemos cambiar el texto de un elemento HTML, las mejores prácticas de Javascript (admitidas por MDN) recomiendan usar textContent en lugar del atributo innerHTML.

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

Cambiar el texto div usando el pseudo elemento :after

Si el cambio de texto es trivial, podemos usar CSS para alterar el texto div. Usamos el pseudo elemento HTML :after, en el que agregamos el texto que deseamos mostrar en el atributo contenido. No se aplica a elementos HTML como <img> donde el navegador reemplaza el contenido con la imagen cargada. El siguiente código detalla el uso.

<div class="pvw-title"><span>Facts</span></div>

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}