În acest articol, vom discuta despre cum să creați un element HTML prin JavaScript. Aici, vom vedea câteva exemple pentru a insera elementul creat în document.
Crearea de elemente prin HTML nu este singura modalitate de a crea elemente. Cu toate acestea, pentru simplitate, de multe ori creăm elemente direct în documentul HTML, dar folosind JavaScript, este posibil să creăm și elemente.
The document.createElement() este folosit pentru a crea dinamic un nod de element HTML cu numele specificat prin JavaScript. Această metodă ia numele elementului ca parametru și creează acel nod element.
După crearea unui element, putem folosi fie metoda appendChild() fie metoda insertBefore() pentru a insera elementul creat în document.
Putem folosi removeChild() metoda de a elimina un nod și poate utiliza, de asemenea, înlocuiți copilul() metoda de înlocuire a nodului.
Sintaxă
document.createElement(nodename);
Această metodă acceptă o singură valoare a parametrului care este menționată după cum urmează:
coarda inversată în c
nume de nod: Este parametrul obligatoriu. Acest parametru este de tip șir. Specifică numele elementului, pe care trebuie să-l creăm. Numele elementului specificat în parametru va crea elementul; în caz contrar, dacă numele elementului specificat nu este recunoscut, va fi creat un element HTML necunoscut.
The document.createElement() va returna elementul nou creat.
Acum, să vedem câteva exemple de utilizare a document.createElement() metodă. Aici, vom arăta două exemple. În primul exemplu, vom folosi appendChild() metoda de inserare a elementului în document, iar în al doilea exemplu, vom folosi insertBefore() metoda de a insera un element creat de document.createElement() metodă.
Exemplul 1
În acest exemplu, folosim document.createElement() metoda de a crea un nou element buton. Vom insera elementul creat folosind appendChild() metodă. Aici, există o distracţie() metoda care va crea un nou element de buton folosind createElement() metodă. Setăm textul utilizând innerHTML care va fi afișat în partea de sus a butonului.
Să vedem exemplul dat mai jos.
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 Testează-l acum Ieșire
După executarea codului de mai sus, rezultatul va fi -
După ce faceți clic pe butonul dat, rezultatul va fi -
Exemplul 2
În acest exemplu, folosim document.createElement() metoda de a crea un nou element buton. Aici, folosim insertBefore() metoda de inserare a elementului creat. Există un element div care are un element copil paragraf. Noul element buton va fi inserat înaintea elementului copil paragraful al elementului div.
Să vedem exemplul dat mai jos.
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 Testează-l acum Ieșire
După executarea codului de mai sus, rezultatul va fi -
După ce faceți clic pe butonul de mai sus, rezultatul va fi -
Captura de ecran de mai sus arată că noul element buton este inserat înaintea elementului paragraf. Acest lucru se datorează faptului că am folosit insertBeofre() metoda de inserare a noului element creat prin folosirea document.createElement() metodă.