Obtékání textových uzlů a prvků pomocí JavaScriptu

Když pracujete na webu, který závisí na dané sadě nástrojů JavaScript, neúmyslně se nakonec pokusíte vyřešit problémy v rámci sady nástrojů, nikoli jazyka. To byl případ, kdy jsem se pokusil zalomit text (možná včetně prvků HTML) pomocí DIV živel. Představte si následující kód HTML:

This is some text and <a href="">a link</a>.

A řekněte, že to chcete změnit na následující:

<div>This is some text and <a href="">a link</a>.</div>

Můžete udělat jednoduchý .innerHTML aktualizace na nadřazeném zařízení, ale problém s tím je, že jakákoli připojení událostí by byla přerušena, protože innerHTML vytváří nové prvky z HTML. Sakra. Je tedy čas vrátit se k základnímu JavaScriptu – pro někoho sláva a pro jiného neúspěch. Zde je návod, jak to provést:

var newWrapper = document.createElement('div');
while(existingParent.firstChild) {
	newWrapper.appendChild(existingParent.firstChild);
}

Pomocí for smyčka nebude fungovat, protože childNodes je aktivní kolekce uzlů, takže její přesun by ovlivnil indexy. Místo toho můžeme udělat kontinuální firstChild kontroluje rodiče, dokud se nevrátí falešná hodnota, a pak víte, že všechny děti byly přesunuty!