Ve vanilla JavaScript můžete použít createElement()
metoda k vytvoření nového prvku DOM. Tato metoda vezme jako vstup název prvku a vytvoří nový prvek HTML s daným názvem.
Na rozdíl od $(...)
jQuery metoda, která při vytváření nového prvku bere počáteční a uzavírací značku prvku jako vstup:
const div = $('<div></div>');
createElement()
pouze metoda potřebuje název prvku:
const anchor = document.createElement('a');
const div = document.createElement('div');
const article = document.createElement('article');
Po vytvoření prvku můžete použít innerText
nebo innerHTML
vlastnosti prvku pro přidání textu a také podřízených uzlů HTML:
// add text
div.innerText = 'Hey, there!';
// add child HTML nodes
div.innerHTML = '<p>Hello World!!!</p>';
Tato metoda není omezena pouze na HTML tagy. Můžete dokonce vytvořit vlastní značky dle vlastního výběru:
const unicorn = document.createElement('unicorn');
// <unicorn></unicorn>
Pro připojení nově vytvořeného prvku HTML k dokumentu poskytuje JavaScript appendChild()
metoda:
// create a new element
const div = document.createElement('div');
div.innerText = 'Hey, there!';
// append element to body
document.body.appendChild(div);