Crear elementos HTML con JavaScript

Lo más normal es que el contenido de nuestra página lo hayamos definido en nuestro documento HTML antes de que la página sea cargada. Si bien, desde JavaScript tenemos un par de métodos muy potentes que nos permiten crear elementos HTML con Javascript una vez cargada la página. Los métodos en cuestión son:

.createElement(elemento)
.appendChild(elemento)

Añadir un elemento h1 a una capa

En nuestro ejemplo vamos a añadir una cabecera, un elemento h1 a una capa que exista en nuestra página. Lo primero es diseñar nuestra página con la capa. Este código es sencillo y nos basta con incluir un elemento div dentro de la página:

<div id="capa"></div>

Ahora añadiremos un formulario, el cual tiene un campo de entrada donde podremos añadir el texto y un botón que invocará a la función JavaScript addElemento(texto), la cual tendrá el código que añadirá el elemento a la capa.

<form>
  <input type="text" id="texto" name="texto"/>
  <input type="button" value="Añadir Elemento" onclick="addElemento(document.getElementById('texto').value);"/>
</form>

Obtener referencia a la capa

Si analizamos la función .addElemento(), lo primero que haremos será obtener una referencia a la capa, a la que posteriormente añadiremos un elemento. Esto lo haremos mediante el método .getElementById(). Como parámetro se pasa el nombre de la capa que queremos acceder, el valor que tenga su atributo id. En este caso es “capa”.

var capa = document.getElementById("capa");

Crear el elemento

Ahora crearemos el elemento h1 y le añadiremos texto. Usamos la función .createElement() y el atributo .innerHTML para adjuntarle texto al elemento. En el primer caso la función .createElement() recibe como parámetro el nombre del elemento que queremos crear. Como lo que vamos a crear es un elemento de cabecera h1 tendrá este nombre como valor. En el caso del atributo .innerHTML lo que haremos será el indicar el texto que irá como contenido del elemento que acabamos de crear.

var elemento = document.createElement("h1");
elemento.innerHTML = texto;

Añadir el elemento a la capa

Por último solo nos quedará el añadir el elemento creado a la capa. Aquí nos apoyaremos en el método .appendChild(elemento).

capa.appendChild(elemento);

Código completo

Así la función que nos permite crear elementos HTML con Javascript quedaría de la siguiente forma:

function addElemento(texto){
  var capa = document.getElementById("capa");
  var elemento = document.createElement("h1");
  elemento.innerHTML = texto;
  capa.appendChild(elemento);
}

Con esto ya hemos visto lo sencillo que resulta manipular el DOM (árbol de objetos de la página web) para poder crear un simple elemento.