V tomto článku budeme diskutovať o tom, ako vytvoriť prvok HTML pomocou JavaScriptu. Tu uvidíme niekoľko príkladov na vloženie vytvoreného prvku do dokumentu.
Vytváranie prvkov pomocou HTML nie je jediným spôsobom vytvárania prvkov. Pre jednoduchosť však mnohokrát vytvárame prvky priamo v HTML dokumente, ale pomocou JavaScriptu je možné vytvárať aj prvky.
The document.createElement() sa používa na dynamické vytvorenie uzla prvku HTML so zadaným názvom prostredníctvom JavaScriptu. Táto metóda berie ako parameter názov prvku a vytvára uzol tohto prvku.
Po vytvorení prvku môžeme použiť metódu appendChild() alebo insertBefore() na vloženie vytvoreného prvku do dokumentu.
Môžeme použiť removeChild() metóda na odstránenie uzla a môže tiež použiť nahradiťChild() spôsob nahradenia uzla.
Syntax
document.createElement(nodename);
Táto metóda akceptuje jednu hodnotu parametra, ktorá je uvedená takto:
cpp sa rovná
názov uzla: Je to povinný parameter. Tento parameter je typu reťazca. Určuje názov prvku, ktorý musíme vytvoriť. Názov prvku zadaný v parametri vytvorí prvok; v opačnom prípade, ak sa nerozpozná názov zadaného prvku, vytvorí sa neznámy prvok HTML.
The document.createElement() vráti novovytvorený prvok.
Teraz sa pozrime na niekoľko príkladov použitia document.createElement() metóda. Tu si ukážeme dva príklady. V prvom príklade použijeme appendChild() metóda na vloženie prvku do dokumentu a v druhom príklade použijeme metódu insertBefore() metóda na vloženie prvku vytvoreného pomocou document.createElement() metóda.
Príklad 1
V tomto príklade používame document.createElement() metóda na vytvorenie nového prvku tlačidla. Vytvorený prvok vložíme pomocou appendChild() metóda. Tu je a zábava () metóda, ktorá vytvorí nový prvok tlačidla pomocou createElement() metóda. Text nastavíme pomocou innerHTML ktorý sa zobrazí v hornej časti tlačidla.
Pozrime sa na príklad uvedený nižšie.
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 Vyskúšajte to Výkon
Po vykonaní vyššie uvedeného kódu bude výstupom -
Po kliknutí na dané tlačidlo bude výstup -
Príklad2
V tomto príklade používame document.createElement() metóda na vytvorenie nového prvku tlačidla. Tu používame insertBefore() spôsob vloženia vytvoreného prvku. Existuje prvok div, ktorý má podradený prvok odseku. Nový prvok tlačidla sa vloží pred podriadený prvok odseku prvku div.
Pozrime sa na príklad uvedený nižšie.
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 Vyskúšajte to Výkon
Po vykonaní vyššie uvedeného kódu bude výstupom -
Po kliknutí na vyššie uvedené tlačidlo bude výstup -
Vyššie uvedená snímka obrazovky ukazuje, že nový prvok tlačidla je vložený pred prvok odseku. Je to preto, že sme použili insertBeofre() metóda na vloženie nového prvku vytvoreného pomocou document.createElement() metóda.