Náhrada innerHTML a innerText přes DOM

Náhrada `innerHTML` a `innerText` přes DOM

Prohlížeč Internet Explorer 4.0 zavedl v DHTML property innerHTML a innerText,
ktéré umožňují dynamicky náhradit obsah elementu. Rozdíl mezi nimi je v tom, že innerHTML
pracuje s elementy a umožňuje vkládat celé části HTML kódu, innerText umí naopak pouze textový obsah.

InnerHTML a innerText přežívají v prohlížečích z rodiny Internet Explorer
dodnes, avšak jejich využívaní bych spíše nedoporučoval. S masivním rozšířením implementace

Model”>DOM
máme k dispozici obecně přijaté rozhraní, které nám umožňuje proprietární inner vlastnosti opustit.

Nebudeme moc teoretizovat a vrhneme se přímo na jádro pudla.

Model”>DOM definuje na objektu Document

metodu createElement, pomocí této metody můžeme
vytvářet elementy specifikovaného typu. Chceme li například vytvořit element div, použijeme následující
konstrukci.

var newElement = document.createElement("div");

Tímto kódem jsme vytvořili HTMLDivElement, ale to

dodávám jen pro zajímavost. Tento nový element není prozatím součástí dokumentu. Pro připojení k dokumentu slouží metoda
appendChild definovaná rozhraním Node. Připojení nového elementu si opět ukážeme na

jednoduchém příkladu.

Bar
Acme

var newElement = document.createElement("div");
       /*získáme referenci na uzel, ke kterému chceme připojit nový element*/
       var refNode = document.getElementById("foo");
       refNode.appendChild(newElement);//provedeme připojení

Vytvoření textového obsahu, který nám zde chybí a element by bez něj byl bezpředmětný, poslouží zároveň jako ukázka náhrady

innerText. Textový obsah
se tvoří podobně jako předešlé elementy a slouží k tomu metoda createTextNode definovaná opět rozhraním Document.

Bar
Acme

var newElement = document.createElement("div");       
       var newText = document.createTextNode("bar.acme.com");
       newElement.appendChild(newText);       
       var refNode = document.getElementById("foo");
       refNode.appendChild(newElement);

Z ukázky je vidět, že použití DOMu je oproti innerHTML a innerText pracnější, ovšem máme zaručenu

funkčnost ve všech prohlížečích podporujících DOM. Na druhou stranu musím poznamenat, že innerHTML byla

implementována například v Mozille i přes fakt, že není součástí DOM.

Související články

(Dagblog 4.1.2004) Poznáváme DOM I
(Dagblog 5.1.2004) Poznáváme DOM II. — struktura dokumentu a objektový model
(Dagblog 12.1.2004) Poznáváme DOM III. — moduly a úrovně
(Dagblog 29.1.2004) Poznáváme DOM Poznáváme DOM IV. — Procházíme dokument
(Dagblog 24.2.2004) Poznáváme DOM Poznáváme DOM V. — Procházíme dokument II.