V dřívějších článcích jsme se zabývali tím, jak jej vytvořit, element a vložit jej před jiný element v DOM pomocí vanilkového JavaScriptu.
V tomto krátkém článku se dozvíte o různých způsobech vložení prvku za další v DOM s JavaScriptem.
insertBefore() Metoda, kterou jsme se naučili dříve přidat prvek, lze také použít k vložení prvku za uzel HTML. Pro tento účel musíme použít prvek nextSibling vlastnost, která vrací odkaz na okamžitý uzel na stejné úrovni stromu.
Zde je příklad:
// create a new element
const elem = document.createElement('p');
// add text
elem.innerText = 'I am a software engineer.';
// grab target element reference
const target = document.querySelector('#intro');
// insert the element after target element
target.parentNode.insertBefore(elem, target.nextSibling);
insertBefore() metoda funguje ve všech moderních i starých prohlížečích včetně Internet Exploreru 6 a vyšších.
Pokud chcete vložit řetězec HTML po určitém prvku v DOM použijte insertAdjacentHTML() místo toho, jako níže:
// insert HTML string after target element
target.insertAdjacentHTML('afterend', '<p>I am a software engineer.</p>');
insertAdjacentHTML() metoda automaticky analyzuje daný řetězec jako HTML a výsledné prvky vloží do stromu DOM na danou pozici. Podívejte se na tuto příručku, kde se o ní dozvíte více.
ES6 after() Metoda
ES6 představil novou metodu nazvanou after() pro vložení prvku hned za existující uzel v DOM. Stačí zavolat tuto metodu na prvek, za který chcete prvek vložit, a předat nový prvek jako argument:
// insert the element after target element
target.after(elem);
Stejně jako before() metoda, after() funguje pouze v moderních prohlížečích, konkrétně v Chrome, Safari, Firefox a Opera. V současné době Internet Explorer tuto metodu nepodporuje. Můžete však použít polyfill pro zvýšení podpory až na IE 9 a vyšší.
Další informace: Jak vložit prvek do DOM v JavaScriptu