logo

JavaScript innerHTML, innerText a textContent

V Javascriptu existují tři vlastnosti, které lze použít k nastavení nebo vrácení obsahu prvku HTML v DOM:innerHTML, innerText a textContent. Pokud si nejste jisti rozdíly a přemýšlíte, který z nich použít, doufejme, že vám pomůže následující srovnání.

(1) vnitřní HTML vlastnost nastavuje a vrací obsah prvku s novým obsahem HTML. 

// Setting text with innerHTML:
const example = document.getElementById('example')
example.innerHTML = "<p>This is <strong>my</strong> paragraph.</p>"

Ačkoli HTML5 zabraňuje <script> Pokud použijete innerHTML k nastavení řetězců pomocí Javascriptu, stále existuje bezpečnostní riziko. Kyberzločinci mohou vkládat kód Javascript bez použití <script> přepsat obsah stránky HTML nebo přesměrovat prohlížeč na jinou stránku se škodlivým kódem. Z tohoto důvodu NEDOPORUČUJEME používat innerHTML při vkládání prostého textu.

Chcete-li se dozvědět více o útocích innerHTML a Cross-Site Scripting (XSS), podívejte se na odkazy na zdroje na konci tohoto příspěvku. 

// HTML5 prevents malicious <script> from executing:
// alert WILL NOT show
const example1 = "<script>alert('I am an annoying alert!')</script>"
el.innerHTML = example1 

const example2 = document.getElementById('example2')
example2.innerHTML = '<script deferred>alert("XSS Attack");</script>'


// Examples of cybercriminals embedding Javascript without <script>:
// alert WILL show
const example3 = "<img src='x' onerror='alert(1)'>"
el.innerHTML = example3 

const example4 = document.getElementById('example4')
example4.innerHTML = '<img src=x onerror="alert(\'XSS Attack\')">'

<img src=j&#X41vascript:alert('test2')>

<img src="http://url.to.file.which/not.exist" onerror=alert(document.cookie);>

<button onmouseover=alert('Wufff!')>click me!</button>



(2) vnitřní text vlastnost vrací obsah všech prvků kromě <script> a <style> Prvky. Vrácený obsah je viditelný prostý text bez jakéhokoli formátování, podobně jako zvýraznění textu a jeho následné zkopírování a vložení. To, co vidíte, je to, co dostanete.

Jednou nevýhodou používání innerText je, že jeho hodnota spouští přeformátování kvůli jeho povědomí o stylování CSS, což vede ke snížení výkonu. Přeformátování je, když prohlížeč přepočítá prvky stránky pro opětovné vykreslení dokumentu. Mezi instance, které spouštějí přeformátování, patří změna velikosti okna prohlížeče nebo změna prvků v DOM. Přeformátování je výpočetně nákladné a mělo by být minimalizováno, aby se zvýšila rychlost, efektivita a uživatelská zkušenost.

POZNÁMKA:Vlastnost innerText není podporována v prohlížeči Internet Explorer 9 a starších verzích. 

// Setting text with innerText:
const example = document.getElementById('example')
example.innerText = "text"



(3) textContent vlastnost vrací nezpracovaný obsah se styly uvnitř všech prvků, ale vylučuje značky prvků HTML. To zahrnuje <script> a <style> prvky, mezery, konce řádků a konce řádku. Na rozdíl od innerHTML má textContent lepší výkon, protože jeho hodnota není analyzována jako HTML. Z tohoto důvodu může použití textContent také zabránit útokům Cross-Site Scripting (XSS). Na rozdíl od innerText si textContent neuvědomuje styly CSS a nespustí přeformátování. Všechny objekty Node mají textContent, zatímco pouze objekty HTMLElement mají innerText.

POZNÁMKA:Vlastnost textContent není podporována v prohlížeči Internet Explorer 8 a starších verzích. 

// Setting text with textContent:
const example = document.getElementById('example')
example.textContent = "word"



Příklad níže ukazuje, jak každá ze tří vlastností vrací obsah <p> prvek: 

<p id="demo"> This element has extra spacing   and contains <span>a span element</span>.
</p>

function getInnerHtml() {
  console.log(document.getElementById("demo").innerHTML)
}

innerHTML returns: 
" This element has extra spacing   and contains <span>a span element</span>."
/* 
The innerHTML property returns the text, spacing, and inner HTML element tags.
*/



function getInnerText() {
  console.log(document.getElementById("demo").innerText)
}

innerText returns: 
"This element has extra spacing and contains a span element."
/* 
The innerText property returns just the visible text, 
without spacing or inner HTML element tags.
*/



function getTextContent() {
  console.log(document.getElementById("demo").textContent)
}

textContent returns: 
" This element has extra spacing   and contains a span element."
/* 
The textContent property returns the text and spacing, 
but without the inner HTML element tags.
*/

Nyní, když znáte rozdíly mezi všemi dostupnými možnostmi pro vracení a nastavení textu v JavaScriptu, použijte tu, která nejlépe vyhovuje vašim potřebám obsahu.

Zdroje:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText
http://perfectionkills.com/the-poor-misunderstood-innerText/
https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/
https://developers.google.com/speed/docs/insights/browser-reflow
https://frontendmasters.com/courses/web-performance/layouts-and-reflows/
https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting
https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)