innerHTML Vs. textContent:Der feine Unterschied.

Auf den ersten Blick sehen beide Eigenschaften so aus, als würden sie dasselbe tun.

Während innerHTML bietet eine einfache und bequeme Möglichkeit, HTML-Vorlagen als Zeichenfolgen zu erstellen und sie in das DOM [Document Object Model] einzufügen, textContent lässt Sie nur einfache Texte als Strings erstellen.

Lassen Sie es uns jetzt aufschlüsseln.

textContent im Einsatz:

Angenommen, wir möchten "I love JavaScript" ausgeben

<p id="output"></p>

<script>
    document.getElementById("output").textContent = "I love Javascript";
</script>

innerHTML im Einsatz:

innerHTML kann alles textContent kann, plus ein höheres Maß an DOM-Manipulation. Zum Beispiel;

Lassen Sie uns "I" ausgeben Liebe JavaScript"
Hinweis:„I“ ist kursiv, „love“ ist fett und nehmen wir an, „JavaScript“ ist rot

<p id="output"></p>

<script>
    document.getElementById("output").innerHTML = "<em>I</em> <strong>love</strong> <span style='color: red;'>JavaScript</span>";
</script>

Fazit:

innerHTML ist reichhaltiger, da man damit phantasievoller werden kann.
Wenn Sie jedoch nur Textinhalte zurückgeben möchten, fahren Sie mit textContent fort .

Ich hoffe, Sie finden das hilfreich.

Ich freue mich, von Ihnen zu lernen.

Wie würden Sie diese Eigenschaften verwenden?