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:

document.createElement();
elemento.appendChild();

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:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Documento con una Capa</title>
</head>
<body>

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

</body>
</html>

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>
 <label for="texto">Texto:</label>
 <input id="texto" type="text" size="40/">
 <input type="button" onclick="addElemento(getElementById('texto').value);" value="Añadir Elemento">
</form>

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");

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 queeremos 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 h1 = document.createElement("h1");
h1.innerHTML = texto;

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(h1);

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 h1 = document.createElement("h1");
  h1.innerHTML = texto;
  capa.appendChild(h1);

}

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.

Twittear

Compartir21

21 Compartir