Cómo insertar elementos con DIV en JavaScript

Escrito por allen bethea Google | Traducido por juliana star
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo insertar elementos con DIV en JavaScript
JavaScript puede manipular objetos div de HTML. (Stockbyte/Stockbyte/Getty Images)

JavaScript proporciona a los programadores las herramientas para modificar el marco invisible de una página web conocido como Document Object Model (DOM, o modelo de objetos del documento). El DOM es la interfaz de programación de la aplicación en lenguaje de marcado de hipertexto (HTML). El método de JavaScript getElementByld() puede acceder a la etiqueta de división de página "div" para añadir o modificar información de estilo en HTML como fondos, fuentes, bordes, anchos y posiciones. Además, la propiedad innerHTML puede cambiar el contenido entre las etiquetas <div> y </div>. Las etiquetas de HTML deben estar etiquetadas con un ID antes de que el método getElementByld() pueda encontrarlas y acceder a ellas.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Un editor de texto plano

Lista completaMinimizar

Instrucciones

  1. 1

    Ejecuta la aplicación de edición de texto plano estándar que esté disponible en tu computadora.

  2. 2

    Escribe el siguiente código en el editor de texto:

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

    inner {

    width:200px; height:20px; background-color:red; color:white; font-size:15px; text-align:right; } --></style>

    <script language="javascript"> function changeDiv(){ document.getElementById("inner").style.width = "500px"; document.getElementById("inner").style.height = "220px"; document.getElementById("inner").style.fontSize = "62px"; document.getElementById("inner").style.textAlign = "center"; document.getElementById("inner").style.backgroundColor = "#FFB3B3"; document.getElementById("inner").style.border = "4px dashed red"; document.getElementById("inner").style.color = "black"; document.getElementById("inner").innerHTML="JavaScript can insert styling and content elements into a Div"; document.getElementById("mybutton").value = "And it works!"; } </script> </head>

    <body> <div id="inner">here is the red div </div>

    <input id="mybutton" type="button" onClick="changeDiv()" value="Click this button to insert new info into the red div above" /> </body> </html>

  3. 3

    Haz clic en el menú "Archivo". Selecciona la opción "Guardar". Guarda con el nombre de archivo "test.html".

  4. 4

    Ejecuta el explorador web que esté disponible en tu computadora. Haz clic en el elemento "Archivo" del menú y selecciona "Abrir archivo".

  5. 5

    Localiza el archivo "test.html" que acabas de crear, selecciónalo con el ratón y luego haz clic en "Abrir".

  6. 6

    Haz clic en el botón etiquetado como "Haz clic en este botón para insertar nueva información en el div rojo superior".

Consejos y advertencias

  • El código de JavaScript puede colocarse en cualquier lugar dentro de las etiquetas "" "". Para código que quiera ejecutarse automáticamente dentro de body, el código debe colocarse antes de los elementos HTML en los que se pretende que actúe. En el ejemplo uno, el código de JavaScript modifica el div etiquetado como "inner". En el ejemplo dos JavaScript se ejecuta pero nada cambia. Coloca tu código JavaScript intencionalmente para asegurarte de obtener el resultado que desees.
  • Ejemplo uno
  • here is the red div
  • document.getElementById("inner").style.width = "500px";
  • document.getElementById("inner").style.backgroundColor = "gray";
  • Ejemplo dos
  • document.getElementById("inner").style.width = "500px";
  • document.getElementById("inner").style.backgroundColor = "gray";
  • here is the red div
  • La gran mayoría de los exploradores web mostrarán el código de HTML y CSS válido de forma diferente. Incluso versiones diferentes del mismo explorador pueden generar problemas de visualización inesperados. Siempre prueba tu código en diferentes exploradores y versiones antiguas del mismo explorador para asegurarte de que el código funcione como se espera.

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