Cómo crear elementos y textos con JavaScript

Por aquí dejo cómo hacer elementos y crear texto con JavaScript:

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="parrafito"></div>
    
    <script>
      var elementoP = document.createElement("p");
      var elementoB = document.createElement("b");
      var elementoBR = document.createElement("br");
      //Asignamos un atributo title al elementoP que hemos creado.
      elementoP.setAttribute("title", "Párrafo creado desde JavaScript");
      //Preparamos algunos nodos de texto
      var texto1 = document.createTextNode("Con JavaScript se ");
      var texto2 = document.createTextNode("pueden realizar ");
      var texto3 = document.createTextNode("un montón ");
      var texto4 = document.createTextNode("de cosas en un documento.");
      //Añadimos al elemento B los nodos texto2, elementoBR y texto3.
      elementoB.appendChild(texto2);
      elementoB.appendChild(elementoBR);
      elementoB.appendChild(texto3);
      //Añadimos al elemento P los nodos texto1, elementoB y texto4.
      elementoP.appendChild(texto1);
      elementoP.appendChild(elementoB);
      elementoP.appendChild(texto4);
      //insertamos el nuevo párrafo como un nuevo hijo de nuestro parrafo
      document.getElementById("parrafito").appendChild(elementoP);
    </script>
  </body>
</html>
abstract business code coder
Photo by Pixabay on Pexels.com

Deja un comentario

Información básica sobre protección de datos Ver más

  • Responsable: Tomas Gonzalez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

error: Content is protected !!

Descubre más desde InfoGonzalez - Blog de formador e informático

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo

Este sitio web utiliza cookies, si necesitas más información puedes visitar nuestra política de privacidad    Ver
Privacidad
Creative Commons License
Except where otherwise noted, the content on this site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.