Aktualizujte textový obsah prvku DOM v JavaScriptu

V minulém článku jsme se podívali na to, jak aktualizovat označení HTML prvku DOM ve vanilla JavaScript. V tomto krátkém tutoriálu se naučíte, jak získat a nastavit text prvku.

JavaScript poskytuje dvě vlastnosti, innerText a textContent , abyste získali a nastavili textový obsah prvku HTML a všech jeho podřízených uzlů.

Pokud nastavíte novou hodnotu innerText nebo textContent , budou všechny podřízené uzly odstraněny a nahrazeny jediným textovým uzlem obsahujícím zadaný řetězec.

Řekněme, že máme následující <p> prvek:

<p id="intro">My name is <b>John Doe</b>!</p>

Následující příklad ukazuje, jak získat textový obsah výše uvedeného prvku:

// grab element
const elem = document.querySelector('#intro');

// get text content
console.log(elem.innerText);
// OR
console.log(elem.textContent);

// My name is John Doe!

Chcete-li nahradit stávající textový obsah úplně, stačí nastavit novou hodnotu pro innerText :

// replace existing text
elem.innerText = 'Hey there! I am Atta';

innerText vlastnost je velmi podobná vlastnosti textContent vlastnictví. Existují však určité rozdíly:

  • innerText vrátí textový obsah všech prvků kromě <script> a <style> prvky, zatímco textContent vrátí textový obsah všech prvky.
  • innerText nemůže použít k získání textového obsahu prvků, které jsou skryté pomocí CSS, ale textContent lze použít.

Další informace: Jak vytvořit prvek DOM pomocí JavaScript