JavaScript insertAdjacentHTML a beforeend

Pokud byste nevěděli: ten zatracený DOM je pomalý. Jak děláme naše webové stránky dynamičtějšími a založenými na AJAX, musíme najít způsoby, jak manipulovat s DOM s co nejmenším dopadem na výkon. Před chvílí jsem se zmínil o DocumentFragments, chytrém způsobu shromažďování podřízených prvků pod „pseudoprvkem“, abyste je mohli hromadně vložit do rodiče. Další skvělou metodou prvků je insertAdjacentHTML : způsob vložení HTML do prvku, aniž by to ovlivnilo jakékoli prvky v nadřazeném prvku.

JavaScript

Pokud máte kus HTML ve formátu řetězce, vrácený například z požadavku AJAX), běžný způsob přidání těchto prvků k nadřazenému prvku je přes innerHTML:

function onSuccess(newHtml) {
	parentNode.innerHTML += newHtml;	
}

Problém s výše uvedeným je, že veškeré odkazy na podřízené prvky nebo události s nimi spojené jsou zničeny kvůli nastavení vnitřního HTML, i když připojujete pouze další HTML -- insertAdjacentHTML a před opravou tohoto problému:

function onSuccess(newHtml) {
	parentList.insertAdjacentHTML('beforeend', newHtml);
}

Ve výše uvedené ukázce kódu je řetězec HTML připojen k nadřazenému prvku bez ovlivňující další prvky pod stejným nadřazeným prvkem. Je to důmyslný způsob, jak vložit HTML do nadřazeného uzlu, aniž byste museli připojovat HTML nebo dočasně vytvářet nadřazený uzel a vkládat do něj podřízený HTML.

Toto API vede k poznání, že problém existuje, a jeho opravě – kdo by si to pomyslel?! Dobře, bylo to trochu pasivně agresivní, ale víte, co tím myslím. Ponechte insertAdjacentHTML praktické – je to velmi méně známé API, které by mělo používat více z nás!