Hier können Sie Teil 3 lesen:

Artikel nicht mehr verfügbar

innerer Text | innerHTML | textContent

Alle drei sind Attribute, die Sie von den Elementen erhalten können. Sie sind nicht gleich und wir werden uns anhand der folgenden Abbildungen ansehen, wie sie sich unterscheiden.

innerText

Wenn es auf ein Element angewendet wird, gibt es nur den Text zurück, der sich innerhalb des Elements befindet, den vom Element umschlossenen Textteil und sonst nichts, es ignoriert auch das Leerzeichen.

Syntax:

element.innerText

Beispiel:

<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>

let p = document.getElementById('experiment');
console.log(p.innerText)

Ausgabe

"
Hello this is Tharun How are you?
"

innerHTML

Wenn es auf ein Element angewendet wird, gibt es den vom Element eingeschlossenen Textteil zusammen mit den darin enthaltenen HTML-Tags zurück und berücksichtigt auch den darin angegebenen Abstand. Sehen Sie sich das Beispiel unten an.

Syntax:

element.innerHTML

Beispiel:

<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>

let p = document.getElementById('experiment');
console.log(p.innerHTML)

Ausgabe

"
  <br>
  Hello this is <span>Tharun<span/> How are you?
  <br>
"

Textinhalt

Wenn es auf ein Element angewendet wird, gibt es den vom Element eingeschlossenen Textteil zurück und berücksichtigt den darin angegebenen Abstand. Sehen Sie sich das Beispiel unten an.

Syntax:

element.textContent

Beispiel:

<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>

let p = document.getElementById('experiment');
console.log(p.textContent)

Ausgabe

"

  Hello this is Tharun How are you?

"

Das sind also die Hauptunterschiede zwischen diesen dreien, die Sie kennen müssen.
Sie können darauf zugreifen und viel mehr Magie ausführen, indem Sie die Elemente greifen. Wir werden Dinge in dieser Serie erforschen und tun.

Morgen folgt der nächste Teil, in dem wir diskutieren, wie Sie mehrere Elemente mit getElementsByClassName erhalten können.

Vielen Dank fürs Lesen 😊

Geschrieben von,

Tharun Shiv

Vielen Dank fürs Lesen. Das ist Tharun Shiv alias Entwickler Tharun