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