feed twitter facebook LinkedIn facebook

JavaScript » Crear elementos HTML con JavaScript

septiembre 9, 2007 por Víctor Cuervo 32 Comentarios Imprimir Imprimir

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 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 (elemento h1) a una capa que exista en nuestra página.

Lo primero es diseñar nuestra página con la capa. Sencillo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Crear elemento HTML</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="addElement(getElementById('texto').value);" value="Añadir Elemento"/>
</form>

Si diseccionamos 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()

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

Ahora crearemos el elemento h1 y le añadiremos texto. Usamos la función createElement y el método .innerHTML para adjuntarle texto al elemento.

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


Visualizar el ejemplo
| Descargar el código

tags: , , , , , ,

Artículos relacionados:

32 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

1 2 3 4
  1. Luis
    octubre 1, 2007 #

    Hola quería saber si es posible copiar un elemento HTML después de haber sido cargada la página y luego pegarlo en cualquier otro lugar. Por ej:

    function copiarpegar () {
    document.getElementById(“multiplicar”).innerHTML+=document.getElementById(“multiplicar”).innerHTML;
    }

    En este caso el div se duplica cada vez que se presiona el botón

  2. Luis
    octubre 1, 2007 #

    Aquí se ve mejor el código
    script type=”text/javascript”
    function copiarpegar () {
    document.getElementById(“multiplicar”).innerHTML+=
    document.getElementById(“multiplicar”).innerHTML;
    }
    /script
    div id=”multiplicar”
    /div
    input type=”button” onClick=”javascript:copiarpegar();”

  3. david
    julio 15, 2008 #

    Hola quisiera saber que tipos de elementos se puede crear con el metodo createElement en javascript

  4. maria solasia
    junio 4, 2009 #

    quisiera saber los tipos de elementos que se puedan crear dentro del javascript

  5. alan
    junio 8, 2009 #

    es posible hacer que me agrege dos y despues que se conserven

  6. maria
    junio 11, 2009 #

    quisiera saber como crear una pagina web con Script y codigos de html

  7. maria
    junio 17, 2009 #

    como aser una pagina web con formularios

  8. lineadecodigo
    junio 20, 2009 #

    @alan,

    Puedes agregar todos los elementos HTML que quieras. Pero solo permanecerán vivos mientras esté la página en el navegador.

    Si recargas la página todo lo que has creado ha desaparecido.

  9. lineadecodigo
    junio 20, 2009 #

    @maria solasia,

    A qué te refieres con elementos JavaScript??? Cual es el API de JavaScript??

  10. lineadecodigo
    junio 20, 2009 #

    @david,

    Con createElement puedes crear cualquier elemento disponible en HTML.

1 2 3 4

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*