Jak vložit prvek do DOM v JavaScriptu

V mých předchozích článcích jsme se zabývali tím, jak přidat značky i prostý text do prvků HTML pomocí vanilkového JavaScriptu. V tomto článku se naučíte vytvořit a vložit nový prvek do DOM pomocí JavaScriptu.

JavaScript poskytuje createElement() metoda k vytvoření nového prvku DOM. Použijme tuto metodu k vytvoření nového <div> prvek:

const div = document.createElement('div');

Novým prvkem je plně manipulovatelný uzel DOM. Můžete přidat třídy CSS, nastavit ID a další atributy, přidat texty a označení a tak dále:

// set attributes
div.id = 'hint';
div.className = 'course-hint';

// add markup
div.innerHTML = '<p>Learn JavaScript</p>';

Jakmile budete připraveni, použijte appendChild() způsob přidat element HTML do DOM:

// grab target element reference
const target = document.querySelector('#intro');

// append div to target
target.appendChild(div);

Výše uvedený kód vloží nový prvek jako poslední dítě cílového uzlu. Chcete-li vložit nový prvek do <body> použijte následující příklad:

// insert element to the body
document.body.appendChild(div);

Případně můžete použít insertBefore() metoda vloží prvek do DOM, těsně před nebo po existující uzel, jak je znázorněno níže:

// insert the element before target element
target.parentNode.insertBefore(div, target);

// insert the element after target element
target.parentNode.insertBefore(div, target.nextSibling);