Crear elementos HTML con JavaScript

09/sep/2007 JavaScript , , , , , 33 Comentarios
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 una vez cargada la página.

Los métodos en cuestión son:

  1. document.createElement();
  2. 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:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  3. <title>Crear elemento HTML</title>
  4. </head>
  5.  
  6.  
  7. <div id="capa">
  8. </div>
  9.  
  10. </body>
  11. </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.

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

  1. 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.

  1. var h1 = document.createElement("h1");
  2. 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).

  1. capa.appendChild(h1);

Vídeos sobre Javascript

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

33 comentarios en “Crear elementos HTML con JavaScript”

Víctor Cuervo

Juan

Soy Juan el chico del coala, jeje: yo quisiera ese mismo efecto, pero que dichos div creados por el usuario, tengan forma de carpeta, que eso lo hago yo con css pero el problema es que no se como y otra cosa que quiero decirle es que salte una ventana diciendo al usuario: “Por favor introduzca la dirección que quiere para este elemento”. Es decir una URL, que puede ser de un documento alojado en drop box, pude ser un codigo de youtube embebido, pueden ser mil cosas pero todas relacionadas con codigo embebido. Para que al final resulte un perfil de usuario a base de copia y pega. Sin tener que almacenar datos privados en mi servidor.

Es decir, el proposito de estos Accesos directos o enlaces, no es otro que hacer que: Mis usuarios completen un perfil propio, con divs propios y enlaces propios a sitios web, blogs, videos o documentos alojados en la nube. Previa configuracion de permisos claro.

Espero haberme explicado bien. Un saludo.

Víctor Cuervo

Juan

Hola que tal? Muy bueno Este tutorial es exactamente lo que quería hacer, pero lo estaba haciendo con la tecnica append de Jquery. Que no sé si es lo mismo, el problema es que tanto con uno como con otro no puedo guardar los elementos que he creado, ¿Tu sabes como se guardan? y si puedo a esos mismos elementos creados meterles un script dentro para que adquieran propiedades?? Es decir todo esto biene porque quiero crear el mismo efecto que hace widows a la hora de crear accesos directos en tu escritorio. ¿Puedo hacerlo con estas 2 técnicas? Gracias de antemano.

Víctor Cuervo

byt

No se manejar biene poe aqui que postee en codigo per lo intento
cite=””>

Víctor Cuervo

byt

EL CODIGO QUE LO TENGO ES ESTE

Víctor Cuervo

byt

Hola necesito ayuda para hacer lo siguente:

Quiero poner un cuadro en todas las subpaginas de mi web y quiero que dentro de este publique textos o lo que sea pero como lo hago que aparesca en todas sin necesidad de escribir de una en una?? Encontre algo parecido con el codigo : donde se necesitaba editar solo el archivo text.js que parece así :

document.write(‘
Hola esta es laprimera pagina de texto para insertar en una pagina web
‘);

pero nu funciona :((

Víctor Cuervo

Víctor Cuervo

@Aaron,

El problema es que no solo es necesario crear el campo en Javascript si no que tienes que tener un programa en servidor (ASP, PHP, Java,…) que te procese los comentarios y los almacene. Tenemos pendiente crear uno de ejemplo.

Víctor Cuervo

Aaron

hola como crear un campo de comentario con javascript igual al que use en esta paina para enviar este comentario

Víctor Cuervo

Oliver Lozada

saludos a todos!!,yo quisiera saber como se hace lo mismo pero con elementos de un html por ejem tengo 1 boton q dice agregar fila y cuando le de agregar debe de aparecer 1 textbox, 2 botones de radio y un checkbox y cada ves q le de click al boton debe de aparecer uno tras otro, como le hago?? de antemano gracias!! saludos 😉

Víctor Cuervo

teo

Hola Víctor cuervo ya subí mi pregunta a foro que me proporcionaste aquí esta el enlace

http://www.dudasprogramacion.com/topic/crear-formularios-dinamicos-en-javascript?replies=1#post-1012

Espero me puedas ayudar gracias de antemano por todo.

Víctor Cuervo

Víctor Cuervo

Víctor Cuervo

teo

No se me pueden proporcionar un correo y a ese correo les envió el código que ya lo intente por este medio y no he podido.

Víctor Cuervo

teo

 
Tipo:

Tenis
Zapatos
Zandalias
otro

Ingresa el valor:

Víctor Cuervo

teo

Creo que en este caja de texto no permite colocar codigo

Víctor Cuervo

teo

Nueva alta de pedido

 
Tipo:

Tenis
Zapatos
Zandalias
otro

Ingresa el valor:

Víctor Cuervo

teo

Perdon noc que paso plasme todo el codigo y noc mostro en el comentario

Víctor Cuervo

teo

Ok el problema este quiero crear un componente html al seleccionar un elemento en especifico de un select justamente debajo de este que esta contenido en un formulario

El código seria el siguiente:

 
Tipo:

Tenis
Zapatos
Zandalias
otro

//Se me ocurrio poner colocar el siguiente codigo en php para que aparecia el componente de //type text osea la caja de texto justamente despues del anterior codigo

Ingresa el valor:

pero en esta parte tube un pequeño inconveniente pues al ser codigo php solamente lo ejecuta el servidor y no el cliente para lo cual implemente el evento onchange”document.form1.submit()” para que se pudiera recargar en la propia pagina y haciendo funcionara la condiciones que tengo el php utilizando el metodo post pero el problema que se presento es que ya no puedo enviar los resultados que procesar el formulario a otra pagina donde las voy a ocupar para dar de alto un registro en una tabla dentro de una base de datos

Entonces investigando encontre javascript que un lenguaje del lado del cliente en el cual podia crear componentes de html desde el javascript que me llevo a esta pagina, pero aun soy novato en este lenguaje por eso les pido ayuda espero me explique

Víctor Cuervo

Víctor Cuervo

@teo,
Te recomiendo que pongas el código con el propblema en nuestro foro de HTML
http://www.dudasprogramacion.com/forum/hypertext-markup-language-html

Para que así podamos ayudarte.

Víctor Cuervo

teo

hola buenas noches, tengo un pequeño problema como agrego un caja de texto en la div cuando selecciono un elemento de un select con el evento onchange porfa

Víctor Cuervo

teo

hola buenas noches, tengo un pequeño problema como agrego un caja de texto en la div cuando selecciono un elemento de un select con el evento onchange

Víctor Cuervo

verteweb

Richard, te dejo un tuto sobre la pregunta que estas realizando.

Saludos.

Cristian

Víctor Cuervo

Richard

Hola, muy útil el código. Sólo una duda: cómo se puede hacer que también al apretar la tecla enter se añadan los elementos dentro de la capa.
Muchas gracias por anticipado.

Víctor Cuervo

AngelFQC

hola, como puedo agregar una imagen
a una tabla mendiante este script

Víctor Cuervo

lineadecodigo

@david,

Con createElement puedes crear cualquier elemento disponible en HTML.

Víctor Cuervo

lineadecodigo

@maria solasia,

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

Víctor Cuervo

lineadecodigo

@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.

Víctor Cuervo

maria

como aser una pagina web con formularios

Víctor Cuervo

maria

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

Víctor Cuervo

alan

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

Víctor Cuervo

maria solasia

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

Víctor Cuervo

david

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

Víctor Cuervo

Luis

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

Víctor Cuervo

Luis

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*