Cómo cargar un DIV en otro DIV dinámicamente

Escrito por kile mckenna | Traducido por carlos alberto feruglio
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo cargar un DIV en otro DIV dinámicamente
Los sitios web dinámicos sirven contenido nuevo basados en las acciones de los usuarios. (Photos.com/Photos.com/Getty Images)

Los sitios web dinámicos reaccionan a la entrada del usuario y cambian el contenido de la página. Varios lenguajes de script (secuencia de comandos) pueden conseguir este efecto. Uno de los más fáciles y el más popular para usar es JavaScript. Te permite cambiar el contenido de elementos en HTML, como divs (contenedor de contenido), basado en una acción, como hacer clic o pasar un mouse. Un clic del mouse puede crear un nuevo div dentro de uno ya existente, generando contenidos relacionados con el botón presionado. Sigue unos pocos pasos para lograr este efecto.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

    Instrucciones

  1. 1

    Crea un div entre las etiquetas body de tu página web e identifica el div como "old div". También crea un botón para que los usuarios hagan clic y active la función JavaScript "newInnerDiv". El código aparecerá de la siguiente manera:

    <body> <div id="oldDiv" > </div> <button type="button" class="button" onclick="newInnerDiv()">Add Div</button>

    </body>

  2. 2

    Crea la función "newInnerDiv" entre las etiquetas head del documento. La función obtiene el div existente mediante su ID de "oldDiv," crea un nuevo elemento div, crea un nuevo elemento p (párrafo) y crea una cadena de texto de "Hi" para colocar en el interior del elemento p. Se anexa el div antiguo con lo nuevo elemento div, establece el identificador del nuevo div a "newDiv", añade el nuevo div con el elemento p nuevo y añade el elemento p nuevo con la cadena de texto nuevo de "Hi".

    Agrega una prueba al inicio de la función para comprobar si este div ya se ha creado una vez que el usuario hace clic en el botón. No hay necesidad de crear divs múltiples. Una prueba simple para este ejemplo es contar cómo muchos divs existen. Si los números de divs actualmente en la página es igual a 1, se ejecuta el código:

    <script type="text/javascript"> function newInnerDiv() { var checkDiv=document.getElementsByTagName("div"); var divNumber=(checkDiv.length); if (divNumber == 1) {

    var changeContent=document.getElementById("oldDiv"); var addDiv=document.createElement("div"); var newPara=document.createElement("p"); var newText=document.createTextNode("Hi");

    changeContent.appendChild(addDiv); addDiv.setAttribute("id","newDiv"); addDiv.appendChild(newPara); newPara.appendChild(newText);} } </script>

  3. 3

    Agrega algunos estilos para ambos divs entre las etiquetas head para que los divs sean fáciles de ver al probar la función. Haz el div viejo rojo y el nuevo div más pequeño y amarillo. Establece algún padding (margen interno) para el botón y los elementos p, si lo deseas:

    <style type="text/css">

    oldDiv { width:200px; height:90px; border: thin solid black; padding:0 5px 5px 5px; background-color:red; position:relative; }

    newDiv { background-color:yellow; width:180px; margin: 10px; position:absolute; }

    .button { margin: 20px 0 0 0; } p { position:relative; float:left; padding:10px; } </style>

  4. 4

    Guarda la página y ábrela en un navegador web. Un cuadro rojo y vacío aparecerá. Haz clic en el botón y el nuevo div se generará, indicado por su color amarillo y su texto "Hi". Mira el "código fuente generado", si está disponible en el navegador, para ver el nuevo div y su contenido dentro del viejo div en la codificación HTML.

    El código completo aparece del siguiente modo:

    <html> <head> <style type="text/css">

    oldDiv { width:200px; height:90px; border: thin solid black; padding:0 5px 5px 5px; background-color:red; position:relative; }

    newDiv { background-color:yellow; width:180px; margin: 10px; position:absolute; }

    .button { margin: 20px 0 0 0; } p { position:relative; float:left; padding:10px; } </style>

    <script type="text/javascript"> function newInnerDiv() { var checkDiv=document.getElementsByTagName("div"); var divNumber=(checkDiv.length); if (divNumber == 1) {

    var changeContent=document.getElementById("oldDiv"); var addDiv=document.createElement("div"); var newPara=document.createElement("p"); var newText=document.createTextNode("Hi");

    changeContent.appendChild(addDiv); addDiv.setAttribute("id","newDiv"); addDiv.appendChild(newPara); newPara.appendChild(newText);} } </script> </head> <body> <div id="oldDiv" > </div> <button type="button" class="button" onclick="newInnerDiv()">Add Div</button>

    </body> </html>

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles