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


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

var elemento=document.createElement("Aca indicamos el nombre del elemento 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.
pagina.html

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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);

Retornar