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!