En aquest article, parlarem de com crear un element HTML mitjançant JavaScript. Aquí, veurem alguns exemples per inserir l'element creat al document.
La creació d'elements mitjançant HTML no és l'única manera de crear elements. Tanmateix, per senzillesa, moltes vegades creem elements directament al document HTML, però utilitzant JavaScript, també és possible crear elements.
El document.createElement() s'utilitza per crear dinàmicament un node d'element HTML amb el nom especificat mitjançant JavaScript. Aquest mètode pren el nom de l'element com a paràmetre i crea aquest node d'element.
Després de la creació d'un element, podem utilitzar el mètode appendChild() o el mètode insertBefore() per inserir l'element creat al document.
Podem utilitzar el removeChild() mètode per eliminar un node i també pot utilitzar el replaceChild() mètode per substituir el node.
Sintaxi
document.createElement(nodename);
Aquest mètode accepta un valor de paràmetre únic que s'indica de la següent manera:
multiplicació matricial en c
nom de node: És el paràmetre obligatori. Aquest paràmetre és de tipus string. Especifica el nom de l'element, que hem de crear. El nom de l'element especificat al paràmetre crearà l'element; en cas contrari, si no es reconeix el nom de l'element especificat, es crearà un element HTML desconegut.
El document.createElement() retornarà l'element acabat de crear.
Ara, anem a veure alguns exemples d'ús document.createElement() mètode. Aquí, mostrarem dos exemples. En el primer exemple, farem servir el appendChild() mètode per inserir l'element al document, i en el segon exemple, utilitzarem el insertBefore() mètode per inserir un element creat pel document.createElement() mètode.
Exemple 1
En aquest exemple, estem utilitzant el document.createElement() mètode per crear un element botó nou. Inserirem l'element creat utilitzant el appendChild() mètode. Aquí, hi ha un diversió() mètode que crearà un nou element de botó mitjançant el createElement() mètode. Configurem el text utilitzant el innerHTML que es mostrarà a la part superior del botó.
Vegem l'exemple que es dóna a continuació.
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 Prova-ho ara Sortida
Després de l'execució del codi anterior, la sortida serà -
Després de fer clic al botó donat, la sortida serà -
Exemple 2
En aquest exemple, estem utilitzant el document.createElement() mètode per crear un element botó nou. Aquí, estem utilitzant el insertBefore() mètode per inserir l'element creat. Hi ha un element div que té un element fill paràgraf. El nou element botó s'inserirà abans de l'element fill paràgraf de l'element div.
Vegem l'exemple que es dóna a continuació.
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 Prova-ho ara Sortida
Després de l'execució del codi anterior, la sortida serà -
Després de fer clic al botó anterior, la sortida serà -
La captura de pantalla anterior mostra que l'element botó nou s'insereix abans de l'element paràgraf. Això és perquè hem utilitzat el insertBeofre() mètode per inserir el nou element creat mitjançant l' document.createElement() mètode.