Jak vytvořit prvek DOM pomocí JavaScriptu

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);