Crear elementos HTML con JavaScript

09/Sep/2007 JavaScript , , , , , 39 Comentarios
Ejemplos Programación en 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.

Vídeos sobre Javascript


39 comentarios en “Crear elementos HTML con JavaScript”

Víctor Cuervo

M F

Que debo hacer si quiero que em mi pagina web los usuarios puedan subir videos y que estos ya queden agregados a la pagina???
igual quisiera agregar una seccion de comentarios a mi pagina web , que debo usar?

Víctor Cuervo

Derwell

Hola! estoy construyendo un sitio web y necesito para nuestra pagina de inicio poder insertar un cuadro de textos, en el que, los usuarios, puedan realizar publicaciones con textos, fotos videos; realizar comentarios, dar me gusta y tal vez un poco de emojis habilitados para la conversación. Esto es posible? alguien puede proporcionarnos algún tipo de ayuda al respecto? Gracias. Cuidensen mucho con lo del Covid-19.

Por Derwell J Fallu

Víctor Cuervo

Angel Arceo

Lo podrías hacer con este metodo .insertAdjacentHTML.

Víctor Cuervo

David

No entiendo por qué no funciona setInterval al aplicarlo sobre la función, cuando la función sí funciona (crea un elemento y lo elimina); con setInterval se escribe cada texto aleatorio tras el anterior (y desapare el color de fondo y las div), en lugar de salir un texto aleatorio en cada ocasión alternativamente (como un slider de texto). He revisado el código varias veces y parece correcto, y ya no se que hacer… El código es este:

function texto_aleatorio_cambiante(){
var textos = new Array();
textos[0] = «Lo que tu elijas en cada momento.»;
textos[1] = «Distribuimos en todo el mundo las mejores recetas.»;
textos[2] = «No tenemos recetas sin esfuerzo y conocimientos.»;
textos[3] = «Os quedasteis muy satisfechos con vuestra investigación.»;
textos[4] = «Los mejores servicios: todo son ventajas.»;

aleat = Math.random() * (textos.length);
aleat = Math.floor(aleat);

document.write(textos[aleat]);
var h2camb = document.getElementById («h2camb»);
padre = h2camb.parentNode;
setTimeout(«padre.removeChild(h2camb)», 3000);
}
setInterval(‘texto_aleatorio_cambiante’, 6000);

Víctor Cuervo

Gerardo Osuna

Hola Ale buenos días, lo que puedes hacer es una función que ejecute la condición cuando se cargue la página, ponerla dentro del $(document).ready(function(){}); De ésta forma al cargar la pagina ya tendrás tu div cargado siempre y cuando tu condición se cumpla.
Espero haberte ayudado.
Saludos.

Víctor Cuervo

Ale

Hola…. lo que quiero sabeer es como hacer para que dicho elemento no desaparesca al recargar la pagina.
Lo que necesito es crear un elemento despues de que se cumpla cierta condicion (eso ya)
Ahora solo falta que al volvar a cargar la página este elemento no desaparesca (nesecito que se este permanentemente dentro del documento)

Gracias…..

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

*