Saltar al contenido

Cómo crear elementos y textos con JavaScript

abstract business code coder

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

Gracias por visitar mi blog de informática, mi nombre es Tomás y soy formador y desarrollador web. Si quiere usted dejarme alguna sugerencia, ayuda o quiere un servicio de formación estoy escuchando ofertas en tomas.gonzalez@infogonzalez.com, en Facebook a https://www.facebook.com/Infogonzalez estoy deseando escucharle. Su duda o sugerencia NO molesta.

Etiquetas:
Tomas Gonzalez
error: Content is protected !!
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.
%d