Tutorial de DHTML : Temarios

Para crear nodos de tipo elemento disponemos del método createElement que contiene el objeto document:

var elemento=document.createElement("Aca indicamos el nombre de la marca HTML a crear")

Para ver el funcionamiento confeccionemos un programa que cree un párrafo en forma dinámica y lo añada a un div.
pagina1.html

<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="parrafos">
</div>
<input type="button" value="Agregar nodo tipo elemento" 
onClick="agregar()">
</body>
</html>

funciones.js

function agregar()
{
  var elemento=document.createElement('p'); 
  var texto=document.createTextNode('Hola Mundo');
  elemento.appendChild(texto);
  var obj=document.getElementById('parrafos');
  obj.appendChild(elemento);
}

En la función agregar se crea un nodo de tipo elemento:

  var elemento=document.createElement('p');

Pero recordemos que los nodos elemento no contienen el texto, sino que hay que crear un nodo de texto y añadirlo al nodo de tipo elemento:

  var texto=document.createTextNode('Hola Mundo');
  elemento.appendChild(texto);

Por último obtenemos una referencia al div y añadimos el párrafo que acabamos de crear:

  var obj=document.getElementById('parrafos');
  obj.appendChild(elemento);

14 - Crear y agregar un nodo de tipo elemento (createElement - appendChild)