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