Na první pohled obě vlastnosti vypadají, že dělají totéž.
Zatímco innerHTML poskytuje jednoduchý a pohodlný způsob, jak vytvořit HTML šablony jako řetězce a vložit je do DOM [Document Object Model], textContent umožňuje vytvářet pouze prosté texty jako řetězce.
Teď to rozebereme.
textContent v akci:
Řekněme, že chceme vypsat „Miluji JavaScript“
<p id="output"></p>
<script>
document.getElementById("output").textContent = "I love Javascript";
</script>
innerHTML v akci:
innerHTML umí vše textContent může a navíc vyšší úroveň manipulace s DOM. Například;
Vypíšeme „Já láska JavaScript"
Poznámka:„Já“ je kurzívou, „láska“ je tučně a předpokládejme, že „JavaScript“ je červeně
<p id="output"></p>
<script>
document.getElementById("output").innerHTML = "<em>I</em> <strong>love</strong> <span style='color: red;'>JavaScript</span>";
</script>
Závěr:
innerHTML je bohatší, protože s ním můžete být více fantazijní.
Ale pokud chcete pouze vrátit textový obsah, pokračujte s textContent .
Doufám, že vám to pomůže.
Rád se od vás učím.
Jak byste tyto vlastnosti použili?