Cómo crear un elemento HTML a través de JavaScript usando CreateElement
Que es createElement ()?
El createElement () es un método integrado en el objeto de documento que tiene la función de crear dinámicamente un elemento HTML desde y devolver el elemento HTML recién creado.
El sintaxis de createElement () se da a continuación:
var creandoElement = documento.createElement (htmltagname);El createElement () Toma un parámetro Htmltagname que es un parámetro obligatorio de cadena de tipo y es el nombre de la etiqueta de un elemento HTML.
Cabe señalar que el createElement () El método crea un elemento HTML, sin embargo, para adjuntar el elemento al documento (página web) tenemos que usar el añadir Niño() o insertBefore () métodos.
Ahora que sabemos lo que el createElement () El método es, veamos un ejemplo para comprender mejor el createElement () método.
Ejemplo 1:
En este ejemplo, crearemos un elemento de botón de JavaScript con el clic de un botón ya existente.
Primero creemos un botón en HTML que tenga un al hacer clic evento adjunto.
Siempre que un usuario haga clic en el botón, comenzará a ejecutar el myFunc () función. Al final, hemos usado el guion etiqueta y proporcionó la fuente (código.js) del archivo JavaScript que contiene el myFunc () función.
El código JavaScript se proporciona a continuación:
función myFunc ()var mybtn = documento.createElement ("botón");
mybtn.innerhtml = "botón nuevo";
documento.cuerpo.appendchild (mybtn);
En el código anterior, primero, inicializamos el myFunc () función y luego creó un elemento de botón usando el createElement () método. Luego, para darle un título al botón, usamos el mybtn.innerhtml propiedad. Al final, unimos el botón al cuerpo de nuestro HTML usando el añadir Niño() método.
La salida se da a continuación:
Podemos ver que cada vez que hagamos clic en el Botón mágico, crea un nuevo botón con el título "Botón nuevo".
Ejemplo2:
En este ejemplo, crearemos un H2 Etiqueta de html a través de JavaScript y luego adjuntarlo con el cuerpo HTML usando el insertBefore () método.
Para este propósito, escribamos primero el código HTML:
Insertar el encabezado sobre esto
El resto del código es el mismo que el Ejemplo 1 con la excepción de que ahora hemos creado un elemento divs dentro del cual creamos un
Etiqueta con la identificación "paraca".
El código JavaScript se proporciona a continuación:
función myFunc ()var myContainer = documento.getElementById ("myContainer");
var para = documento.getElementById ("para");
var myheading = documento.createElement ("H2");
myheading.innerhtml = "nuevo encabezado";
MyContainer.insertBefore (myheading, para);
Dentro de la función, primero obtenemos la referencia de y
elemento de html. Entonces creamos un
elemento usando createElement () método. Para insertarlo antes del La salida del código anterior se proporciona a continuación: Cada vez que hacemos clic en el botón mágico, un nuevo elemento H2 se crea a través de JavaScript's createElement () método. Conclusión El objeto de documento nos da acceso a elementos HTML y uno de los métodos incorporados de los objetos de documento es el createElement () método. El createElement () El método se utiliza para crear un elemento HTML dinámicamente tomando el nombre de la etiqueta HTML como su parámetro y luego devolviendo el elemento HTML recién creado. Para adjuntar el elemento HTML recién creado a HTML, usamos el añadir Niño() o insertBefore () métodos. En esta publicación, vimos cómo crear un elemento HTML usando el createElement () Método en JavaScript.