En este artículo, discutiremos cómo crear un elemento HTML a través de JavaScript. Aquí veremos algunos ejemplos para insertar el elemento creado en el documento.
Crear elementos mediante HTML no es la única forma de crear elementos. Sin embargo, por simplicidad, muchas veces creamos elementos directamente en el documento HTML pero usando JavaScript también es posible crear elementos.
El documento.createElement() se utiliza para crear dinámicamente un nodo de elemento HTML con el nombre especificado a través de JavaScript. Este método toma el nombre del elemento como parámetro y crea ese nodo de elemento.
Después de la creación de un elemento, podemos usar el método appendChild() o el método insertBefore() para insertar el elemento creado en el documento.
Podemos usar el eliminarNiño() método para eliminar un nodo y también puede utilizar el reemplazarNiño() método para reemplazar el nodo.
Sintaxis
document.createElement(nodename);
Este método acepta un único valor de parámetro que se indica de la siguiente manera:
fmoviez
nombre del nodo: Es el parámetro obligatorio. Este parámetro es de tipo cadena. Especifica el nombre del elemento que tenemos que crear. El nombre del elemento especificado en el parámetro creará el elemento; de lo contrario, si no se reconoce el nombre del elemento especificado, se creará un elemento HTML desconocido.
El documento.createElement() devolverá el elemento recién creado.
Ahora, veamos algunos ejemplos del uso de documento.createElement() método. Aquí mostraremos dos ejemplos. En el primer ejemplo, usaremos el añadir Niño() método para insertar el elemento en el documento, y en el segundo ejemplo, usaremos el insertar antes() método para insertar un elemento creado por el documento.createElement() método.
Ejemplo 1
En este ejemplo, estamos usando el documento.createElement() Método para crear un nuevo elemento de botón. Insertaremos el elemento creado usando el añadir Niño() método. Aquí hay un divertido() método que creará un nuevo elemento de botón usando el crearElemento() método. Configuramos el texto usando el HTML interno que se mostrará en la parte superior del botón.
Veamos el ejemplo que se da a continuación.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Pruébalo ahora Producción
Después de la ejecución del código anterior, el resultado será:
Después de hacer clic en el botón indicado, el resultado será:
Ejemplo2
En este ejemplo, estamos usando el documento.createElement() Método para crear un nuevo elemento de botón. Aquí estamos usando el insertar antes() Método para insertar el elemento creado. Hay un elemento div que tiene un elemento secundario de párrafo. El nuevo elemento de botón se insertará antes del elemento secundario de párrafo del elemento div.
Veamos el ejemplo que se da a continuación.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Pruébalo ahora Producción
Después de la ejecución del código anterior, el resultado será:
Después de hacer clic en el botón de arriba, el resultado será:
La captura de pantalla anterior muestra que el nuevo elemento de botón se inserta antes del elemento de párrafo. Esto se debe a que hemos utilizado el insertarBeofre() método para insertar el nuevo elemento creado utilizando el documento.createElement() método.