Skip to content

Latest commit

 

History

History
42 lines (31 loc) · 1.82 KB

04-crear-elementos.md

File metadata and controls

42 lines (31 loc) · 1.82 KB
Raw

Crear elementos

Para crear elementos en el DOM utilizando JavaScript, podemos utilizar el método createElement. Este método nos permite crear un nuevo elemento HTML con la etiqueta especificada y luego podemos agregarlo al DOM utilizando métodos como appendChild o insertBefore.

A continuación, te mostraré un ejemplo de cómo crear elementos en el DOM:

<!DOCTYPE html>
<html>
<head>
  <title>Creación de elementos en JavaScript</title>
</head>
<body>
  <div id="container"></div>

  <script>
    // Obtener una referencia al contenedor
    const container = document.getElementById('container');

    // Crear un nuevo elemento
    const newElement = document.createElement('p');

    // Asignar contenido al nuevo elemento
    newElement.textContent = 'Este es un nuevo párrafo creado con JavaScript';

    // Agregar el nuevo elemento al contenedor
    container.appendChild(newElement);
  </script>
</body>
</html>

En este ejemplo, utilizamos JavaScript dentro de la etiqueta <script> para crear un nuevo elemento p y agregarlo al DOM. Aquí está el flujo de trabajo:

  • Utilizamos getElementById para obtener una referencia al elemento del contenedor.
  • Creamos un nuevo elemento utilizando createElement y especificamos la etiqueta deseada, en este caso, p.
  • Asignamos contenido al nuevo elemento utilizando la propiedad textContent.
  • Agregamos el nuevo elemento al contenedor utilizando appendChild.

Al ejecutar este código, verás que se agrega un nuevo párrafo al contenedor en la página web.

Recuerda que una vez que has creado un elemento, puedes manipularlo aún más, agregarle atributos, estilos o incluso adjuntar eventos a él antes de agregarlo al DOM. El método createElement es muy útil para generar elementos de forma dinámica y personalizada en respuesta a la lógica de tu aplicación.