Como añadir html dentro un elemento con javascript

Portada

Tecnología

Programación

Detalles: Categoría: Programación; Última actualización el Lunes, 14 Noviembre 2011 00:29; Escrito por cybnet; Visto: 3392

Utilizando javascript es posible introducir nuevo html dentro un elemento de una página. Por ejemplo, tienes el siguiente div:

<div id="contenedor"></div>

Y necesitas introducir nuevo código html en el interior de este div de forma dinámica, por ejemplo para actualizar el contenido html via ajax. La solución con javascript cuenta con dos opciones, dependiendo de tu situación te será mejor una que otra, veamos:

Inserción de html en un elemento html utilizando innerHTML

Una posibilidad que nos brinda javascript para introducir código html dentro de un elemento ya existente es simplemente utilizando la función innerHTML. Esta función es, sin duda, la más utilizada para actualizar código html de nuestra página. Pero esta función no nos servirá para agregar nuevo código html sin eliminar el anterior. Es decir, si tenemos contenido dentro de un div y aplicamos innerHTML a este div, el contenido previo será eliminado y reemplazado por el nuevo. Ejemplo:

Tenemos este html:

<div id="contenedor">
  <p>Contenido original</p>
</div>

y aplicamos el siguiente javascript:

function replace(){
  var contenedor = document.getElementById('contenedor');
  contenedor.innerHTML = '<p>Nuevo contenido</p>';
}

El html quedará:

<div id="contenedor">
  <p>Nuevo contenido</p>
</div>

Para que no se elimine el contenido previamente existente podemos usar la adición en lugar de la igualdad simple:

function addElement() {

  var contenedor = document.getElementById('midiv');

  var nuevodiv = '<div id="nuevodiv"><p>Este el contenido del nuevo div</p></div>';

  contenedor.innerHTML += nuevodiv;

}

Inserción de html dentro de otro elemento html utilizando la función appendChild

Utilizando la función appendChild de javascript podemos introducir cualquier elemento html, y su contenido, donde queramos. Lo único que hay que tener claro es que el elemento html a introducir debe existir en el DOM, y si no existe hay que crearlo primero con la función createElement.

Por ejemplo:

function addElement()  {

  var contenedor = document.getElementById('midiv');

  var nuevodiv = document.createElement('div');

  var divid = 'nuevodiv';

  nuevodiv.setAttribute('id',divid);

  nuevodiv.innerHTML = '<p>Este el contenido del nuevo div</p>';

  contenedor.appendChild(nuevodiv);

Si llamamos a la función anterior introducirá el nuevo div con su contenido dentro del primer div. Con la función javascript appendChild el nuevo contenido introducido se irá al final del elemento contenedor. En nuestro caso el html quedaría, tras llamar a la función:

<div id="contenedor">
 <div id="nuevodiv">
   <p>Este el contenido del nuevo div</p>
 </div>
</div>

Del mismo modo podemos eliminar cualquier elemento html, y su contenido, utilizando la función javascript removeChild:

function removeElement() {

  var contenedor = document.getElementById('midiv');

  var nuevodiv = document.getElementById('nuevodiv');

  contenedor.removeChild(nuevodiv);

}

La última vez que tuve que hacer algo parecido tuve que elegir la primera opción pues me resultó más cómodo para agregar, que no reemplazar, el código html que recibía de una llamada ajax al contenido html ya existente previamente.

+1 -1 Reportar