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ímcotextContent
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, aletextContent
lze použít.
Další informace: Jak vytvořit prvek DOM pomocí JavaScript