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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Jak vytvořit WYSIWYG editor

Vlastní jednoduchý WYSIWYG editor

Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.

Detekce zapnutého JavaScriptu

Zapnutý a vypnutý JavaScript

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Upozornění před opuštěním stránky

Upozornění před zavřením stránky

Javascriptová událost onbeforeunload umožňuje pozastavit uzavření/obnovení stránky.

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Komentáře