JS vlastnost innerHTML

Napříč prohlížeči široce podporovaná metoda innerHTML slouží v JS k:

1. získání HTML obsahu nějakého elementu,
2. nastavení HTML obsahu do nějakého elementu.

Získání obsahu

Po získání elementu (metodami getElement*, querySelectorem a podobně) jde pracovat s jeho vlastností innerHTML. Třeba HTML obsah elementu s identifikátorem „element“ vypsat hláškou alert.

<div id="element">Obsah</div>
<script>
  var el = document.getElementById("element");
  alert(el.innerHTML); // vypíše „Obsah“
</script>

Ukázka

Nastavení innerHTML

Zajímavější je nepochybně nějaké HTML za pomoci JavaScriptu nastavovat. Díky tomu je možné do stránky dynamicky vypisovat obsah.

<div id="prazdny-element"></div>
<script>
  var el = document.getElementById("prazdny-element");
  el.innerHTML = "Obsah";
</script>

Tento kód vloží do prázdného <div>u Obsah. Ukázka

Upozornění: Důležitý obsah by měl být přímo v HTML. S obsahem vypsaným JavaScriptem mohou mít problémy vyhledávače.

Jak innerHTML funguje?

Při nastavení innerHTML musí prohlížeč projít obsah řetězce a podle toho poupravit celý DOM (Document Object Model) daného elementu.

Z toho plyne pár úskalí, na která je si dobré dát pozor.

Úprava innerHTML v cyklu

Mějme následující kód, který si najde seznam a v cyklu do něj vloží 10 položek.

var element = document.getElementById("seznam");
for (var i = 1; i <= 10; i++) {
  element.innerHTML += "<li>" + i + "</li>";
}

Ukázka

Funkční to bude, ale zbytečně neefektivní – každý jednotlivý průchod cyklu bude manipulovat s DOMem celého elementu.

Lepší řešení proto je si obsah ukládat do pomocné proměnné a pomocí innerHTML ho nastavit najednou:

var element = document.getElementById("seznam");
var obsah = "";
for (var i = 1; i <= 10; i++) {
  obsah += "<li>" + i + "</li>";
}
element.innerHTML = obsah;

Ukázka

Připojení obsahu

Konstrukce element.innerHTML += "<p>něco</p>" je obecně ve většině případů dost nešťastná.

Kvůli přidání něčeho se musí znovu vytvořit celý DOM elementu. Kromě toho, že to u složitějších věcí dlouho trvá, se tím zresetuje dosavadní stav – například vyplněná políčka formulářů a podobně. (Někdy se to ale může hodit – třeba u resetování <input type="file">.)

Ukázka

Vlastnost insertAdjacentHTML

Řešením na překreslování DOMu při změně innerHTML je metoda insertAdjacentHTML.

Funguje ve všech aktuálních versích prohlížečů (IE 4+, Chrome 1+, Firefox 8+, Opera 7+).

element.insertAdjacentHTML(umisteni, obsah);

První parametr umisteni určuje, kam se obsah má vložit:

• beforebegin – před element
• afterbegin – na začátek elementu
• beforeend – před konec elementu
• afterend – za element

U prostého odstavce vypadají posice následovně.

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  Obsah
  <!-- beforeend -->
</p>
<!-- afterend -->

Druhý parametr obsah je potom text / HTML kód, který se má vložit.

Ukázka

Vlastnosti textContent a innerText

Pro získávání/nastavování obsahu, který neobsahuje HTML, existují vlastnosti podobné jako innerHTML.

Vlastnosti textContent i innerText fungují obdobně, jen mají různou podporu v prohlížečích.

1. textContent – funguje od IE 9
2. innerText – funguje všude kromě Firefoxu

Ukázka

Kvůli těmto rozdílům je snazší používat innerHTML. V případě, že je vyloženě cílem získat obsah bez HTML značek, je možné obě vlastnosti sjednotit.

var text = element.textContent || element.innerText;

Odkazy jinam

• DevDocs: Node.textContent
• MDN: Element.insertAdjacentHTML()
• John Resig: DOM insertAdjacentHTML