V tomto článku budeme diskutovat o tom, jak vytvořit prvek HTML pomocí JavaScriptu. Zde uvidíme několik příkladů vložení vytvořeného prvku do dokumentu.
Vytváření prvků pomocí HTML není jediný způsob, jak vytvářet prvky. Pro jednoduchost však často prvky vytváříme přímo v dokumentu HTML, ale pomocí JavaScriptu je možné prvky vytvářet také.
The document.createElement() se používá k dynamickému vytvoření uzlu prvku HTML se zadaným názvem pomocí JavaScriptu. Tato metoda převezme název prvku jako parametr a vytvoří uzel prvku.
Po vytvoření prvku můžeme buď použít metodu appendChild() nebo metodu insertBefore() k vložení vytvořeného prvku do dokumentu.
Můžeme použít removeChild() metoda k odstranění uzlu a může také použít nahraditChild() způsob nahrazení uzlu.
Syntax
document.createElement(nodename);
Tato metoda přijímá jednu hodnotu parametru, která je uvedena takto:
příklady binárních stromů
jméno uzlu: Je to povinný parametr. Tento parametr je řetězcového typu. Určuje název prvku, který musíme vytvořit. Název prvku zadaný v parametru vytvoří prvek; v opačném případě, pokud není název zadaného prvku rozpoznán, bude vytvořen neznámý prvek HTML.
The document.createElement() vrátí nově vytvořený prvek.
Nyní se podívejme na několik příkladů použití document.createElement() metoda. Zde si ukážeme dva příklady. V prvním příkladu použijeme appendChild() metodu pro vložení prvku do dokumentu a ve druhém příkladu použijeme metodu insertBefore() metoda pro vložení prvku vytvořeného pomocí document.createElement() metoda.
Příklad1
V tomto příkladu používáme document.createElement() metoda k vytvoření nového prvku tlačítka. Vytvořený prvek vložíme pomocí appendChild() metoda. Zde je a zábava() metoda, která vytvoří nový prvek tlačítka pomocí createElement() metoda. Text nastavíme pomocí vnitřní HTML které se zobrazí v horní části tlačítka.
Podívejme se na příklad uvedený níže.
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 Otestujte to hned Výstup
Po provedení výše uvedeného kódu bude výstupem -
Po kliknutí na dané tlačítko bude výstupem -
Příklad2
V tomto příkladu používáme document.createElement() metoda k vytvoření nového prvku tlačítka. Zde používáme insertBefore() metoda pro vložení vytvořeného prvku. Existuje prvek div, který má podřízený prvek odstavce. Nový prvek tlačítka bude vložen před podřízený prvek odstavce prvku div.
Podívejme se na příklad uvedený níže.
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 Otestujte to hned Výstup
Po provedení výše uvedeného kódu bude výstupem -
Po kliknutí na výše uvedené tlačítko bude výstup -
Výše uvedený snímek obrazovky ukazuje, že nový prvek tlačítka je vložen před prvek odstavce. Je to proto, že jsme použili insertBeofre() metoda pro vložení nového prvku vytvořeného pomocí document.createElement() metoda.