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.
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?
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
Angel Arceo
Lo podrías hacer con este metodo .insertAdjacentHTML.
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);
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.
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…..
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.
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.
byt
No se manejar biene poe aqui que postee en codigo per lo intento
cite=»»>
byt
EL CODIGO QUE LO TENGO ES ESTE
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
@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.
Aaron
hola como crear un campo de comentario con javascript igual al que use en esta paina para enviar este comentario
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 ;)
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
@teo,
Por favor, ponlo en el foro http://www.dudasprogramacion.com/forum/hypertext-markup-language-html
Gracias.
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.
teo
Tipo:
Tenis
Zapatos
Zandalias
otro
Ingresa el valor:
teo
Creo que en este caja de texto no permite colocar codigo
teo
Nueva alta de pedido
Tipo:
Tenis
Zapatos
Zandalias
otro
Ingresa el valor:
teo
Perdon noc que paso plasme todo el codigo y noc mostro en el comentario
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
@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.
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
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
verteweb
http://www.todoexpertos.com/categorias/tecnologia-e-internet/desarrollo-de-sitios-web/javascript/respuestas/267453/discriminar-teclas-con-el-evento-onkeypress
este es el link.
Saludos
verteweb
Richard, te dejo un tuto sobre la pregunta que estas realizando.
Saludos.
Cristian
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.
AngelFQC
hola, como puedo agregar una imagen
a una tabla mendiante este script
lineadecodigo
@david,
Con createElement puedes crear cualquier elemento disponible en HTML.
lineadecodigo
@maria solasia,
A qué te refieres con elementos JavaScript??? Cual es el API de JavaScript??
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.
maria
como aser una pagina web con formularios
maria
quisiera saber como crear una pagina web con Script y codigos de html
alan
es posible hacer que me agrege dos y despues que se conserven
maria solasia
quisiera saber los tipos de elementos que se puedan crear dentro del javascript
david
Hola quisiera saber que tipos de elementos se puede crear con el metodo createElement en javascript
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();»
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