Změna obsahu elementu

Pokud potřebujete změnit obsah elementu, máte v JS opět k dispozici několik možností. Nejjednodušším způsobem je využit metodu innerHTML, která vám dovoluje do elementu vložit přímo HTML kód, které zároveň prohlížeč rovnou vykreslí. Pokud vám v dané situaci stačí použít pouze textový obsah, doporučuji využít metodu textContent. Další možností je vytvořit jednotlivé prvky v paměti (text pomocí createTextNode, elementy createElement) a ty poté je vložit do dokumentu.

Pokud chceme vkládat vlastní obsah do elementu, je také potřeba vzít v potaz bezpečnost. Na ochranu před XSS útokem je bezpečnější používat metody createTextNode nebo textContent, které pracují pouze s textem. XSS je typ útoku, při kterém se do webové stránky vkládá škodlivý JavaScript kód, který je pak spuštěn v prohlížeči uživatele. Můžete také preventivně escapovat vstup nahrazováním potenciálně nebezpečných znaků jako jsou <, > apod.

Jak začít? Nejprve je třeba získat referenci na element, který zamýšlíme měnit. Tento článek nabízí užitečné ukázky kódu, které můžete použít pro vlastní účely. Například element s ID "myDiv" můžeme najít pomocí metody getElementById().

var element = document.getElementById("myDiv");

Při použití zmiňovaných metod je důležité se ujistit, že element, na který se odkazujete, existuje. Pokud se odkazujete na neexistující element, může dojít k chybě.

Vkládání stringu

innerHTML

Je důležité si uvědomit, že innerHTML dovoluje vkládá do elementu HTML kód a tím představuje bezpečnostní riziko (především riziku XSS útoku). Například následující kód vloží obrázek a odkaz do elementu s id "myDiv":

element.innerHTML = "<img src='obrazek.jpg' alt='Obrázek'> <a href='https://www.example.com'>Odkaz</a>";

Pomocí operátoru += můžete také připojit další obsah k existujícímu obsahu elementu.

element.innerHTML += " Nový obsah";

textContent

Metoda textContent se nepodobá innerHTML. Pokud do ní vložíte HTML, pak ho escapuje a nahradí < a > entitami (&lt; a &gt;). A jak z názvu napovídá umožňuje nastavit nebo vrátit textový obsah elementu. Například následující kód změní textový obsah elementu s id "myDiv" na nový obsah:

element.textContent = "Nový obsah";

Metoda ignoruje HTML značky a zobrazí pouze samotný text. Například pokud použijeme textContent k nastavení obsahu elementu s HTML značkami, zobrazí se pouze samotný text, aniž by byly značky interpretovány:

element.textContent = "<p>Nový obsah</p>"; // Zobrazí se "Nový obsah" bez značky <p>

innerText

Vlastnost innerText se používá zdánlivě obdobně jako textContent. Nicméně je mezi nimi několik rozdílů^1:

• textContent vrátí text každého prvku v nodu. Naproti tomu innerText zohledňuje stylování elementu a nevrátí text „skrytých“ prvků.

• drobné odchylky v bílých znacích.

• textContent je metoda rozhraní Node a innerText zase Element

• textContent může být rychlejší než innerText, protože nemusí zohledňovat stylování elementu.

Vkládání elementů

Další způsoby, jak změnit obsah elementu v HTML dokumentu, je pomocí metod pro jejich manipulaci, jako je appendChild nebo insertBefore.

createTextNode

Metoda createTextNode se používá k vytvoření nového textového nodu. Ten nepřekvapivě obsahuje pouze textový obsah a neobsahuje žádné HTML.

Například pokud chcete vytvořit nový textový uzel s obsahem "Hello, World!", můžete použít následující kód:

let textNode = document.createTextNode("Hello, World!");

Poté můžete tento node přidat do dokumentu pomocí metody appendChild nebo insertBefore. Například následující kód přidá textový uzel do elementu s id "myDiv":

let textNode = document.createTextNode("Hello, World!");
element.appendChild(textNode);

Můžete také nový node vložit přímo do elementu pomocí vlastnosti textContent nebo innerHTML.

let textNode = document.createTextNode("Hello, World!");
element.textContent = textNode.textContent;