Vložte prvek před jiný prvek DOM pomocí JavaScriptu

Ve vanilkovém JavaScriptu můžete použít insertBefore() metoda pro vložení prvku před jiný prvek HTML v DOM. Tato metoda přidá prvek přímo před existující prvek v dokumentu.

Řekněme, že máme následující existující <p> prvek:

<p id="intro">Hey, I am John!</p>

Naším cílem je přidat dalších <p> přímo před výše uvedeným prvkem v DOM. Zde je příklad, který vytvoří novou značku odstavce a poté ji vloží před výše <p> tag:

// create new element
const elem = document.createElement('p');

// add text
elem.innerText = 'Personal Details';

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

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

insertBefore() tuto metodu podporují všechny moderní i staré prohlížeče včetně Internet Exploreru 6 a vyšší.

Pokud chcete vložit řetězec HTML před prvkem v DOM byste měli použít insertAdjacentHTML() místo toho. Tato metoda analyzuje zadaný řetězec jako HTML a vloží výsledné prvky do stromu DOM na zadanou pozici. Zde je příklad:

// insert HTML string before target element
target.insertAdjacentHTML('beforebegin', '<p>Personal Details</p>');

Podívejte se na tohoto průvodce MDN, kde se dozvíte více o insertAdjacentHTML() metoda.

ES6 before() Metoda

insertBefore() metoda funguje skvěle pro přidání nového prvku před jiný prvek v DOM. Musíte jej však volat na parentNode cílového prvku.

Naštěstí ES6 představil novou metodu nazvanou before() pro vložení prvku před jiný prvek DOM. Zavoláte before() přímo na cílový uzel a předejte nový prvek jako parametr, jako je níže:

// insert the element before target element
target.before(elem);

A to je vše. before() je pouze podporovány nejnovějšími verzemi prohlížečů Chrome, Safari, Firefox a Opera a nefunguje v prohlížeči Internet Explorer. Můžete však použít polyfill k rozšíření podpory až na IE 9 a vyšší.

Další informace: Jak vložit prvek do DOM v JavaScriptu