Ändern Sie den Text eines Div mit Javascript

1. div-Text mit dem innerHTML-Attribut ändern
2. Ändern Sie den Inhalt eines Divs mit dem Node-Attribut textContent
3. Innerer HTML-Versus Sicherheitsaspekt textcontent
4. Ändern Sie den div-Text mit dem :after Pseudo-Element

Die div-Elemente sind von Natur aus nicht interaktiv. Javascript haucht ihm Leben ein, indem es interaktiv gemacht wird. Möglicherweise müssen wir den von einem div angezeigten Text umformulieren. Beispielsweise können wir bei der Implementierung einer Bearbeitungsfunktion die Bildschirme wiederverwenden, die für die Entwicklung der Hinzufügen-Funktion entwickelt wurden. Nur die Formulierungen müssen geändert werden. Was die Hinzufügen-Funktion betrifft, müssen wir möglicherweise das Schlüsselwort Hinzufügen einer Schaltfläche in Aktualisieren umformulieren und so weiter. Sehen wir uns einige Möglichkeiten an, wie wir den Text eines div dynamisch ändern können.

div-Text mit dem innerHTML-Attribut ändern

Im Gegensatz zu anderen Programmiersprachen verwenden wir keine Getter- und Setter-Methoden, um einen Text auf HTML-Elemente zu setzen. Das HTML-Elementobjekt für ein div hat ein Attribut namens innerHTML. Wir können es verwenden, um den Inhalt des HTML-Objekts abzurufen und festzulegen. Hier wird das HTML-Objekt live sein. Das heißt, es spiegelt jede Änderung der Elementeigenschaft im Browser bei der Aktualisierung wider.

Es folgt die Syntax für die Verwendung von innerHTML.

var text = htmlElement.innerHTML;
htmlElement.innerHTML = 'New Text';

Im obigen Code-Schnipsel erhalten wir den Inhalt eines HTML-div-Elements mit dem htmlElement.innerHTML. Dabei ist das htmlElement das eigentliche HTML-Objekt. Auf ähnliche Weise können wir den Inhalt auf ein div setzen, indem wir dasselbe Attribut verwenden, das innerHTML des Elements. Wir weisen lediglich den Textinhalt dem innerHTML zu.

• Verwendungszweck:

<div id="div-element">Hey there!!</div>

window.onload = function() {
  document.getElementById('div-element').innerHTML = 'Hello World!!';
  console.log(document.getElementById('div-element').innerHTML);
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!';
  console.log(document.getElementById('div-element').innerHTML);
}

Ausgabe:

Hello World!!
Hello bunny!!

Bevor wir .innerHTML anwenden, müssen wir das HTML-Element auswählen. Wir können es auf verschiedene Weise tun. Javascript hat viele Funktionen, mit denen wir Elemente aus dem DOM abfragen können. Im Folgenden sind einige der am häufigsten verwendeten Methoden aufgeführt.

• getElementById(): Diese Funktion der Schnittstelle document dient dazu, ein Element aus dem DOM anhand seiner im HTML angegebenen id auszuwählen. Die Funktion gibt das dem ausgewählten Element entsprechende HTML-Objekt zurück.
• getElementsByClassName: Mit der Funktion getElementsByClassName können wir Elemente basierend auf dem css-Klassennamen abfragen. Von dieser Javascript-Methode werden mehrere Elemente als Array von HTML-Objekten zurückgegeben.
• getElementsByName: Es gibt eine andere Möglichkeit, die Elemente mit dem Attribut name auszuwählen. Wir geben das name-Attribut für den Knoten in HTML an. Diese Methode gibt ein Array von HTML-Objekten zurück. Wir können es verwenden, insbesondere wenn wir daran interessiert sind, mehrere Elemente mit einem bestimmten Stil, einer bestimmten CSS-Klasse, auszuwählen und auf sie alle auf einmal zu reagieren.
• getElementsByTagName: Wir können Elemente auch basierend auf ihren HTML-Tags mit der Funktion getElementsByTagName() auswählen. Zum Beispiel können wir einige Operationen an allen div-Elementen in einem Abschnitt von DOM usw. ausführen. Wie der Name schon sagt, gibt die Funktion ein Array von HTML-Objekten zurück.
• querySelector: Javascript-Funktion querySelector ist etwas allgemeiner und kann verwendet werden, um HTML-Elemente mit der css-Abfrage auszuwählen. Die Funktion gibt das erste Element zurück, das die in ihrem Parameter übergebene Bedingung erfüllt.
• querySelectorAll: Dieser ist dem querySelector ähnlich, mit dem einzigen Unterschied, dass er mehr als ein Element zurückgibt, das dem als Parameter übergebenen css query-Format entspricht.

Ändern Sie den Inhalt eines Divs mit dem Node-Attribut textContent

Auch wenn wir das innerHTML recht häufig verwenden, birgt seine Verwendung ein Sicherheitsrisiko. Es hängt damit zusammen, wie das innerHTML den Inhalt des HTML-Elements ersetzt. Das Attribut innerHTML entfernt alle Sub-HTML-Knoten auf einmal und fügt den neuen Inhalt wie darin zugewiesen hinzu.

Das Sicherheitsrisiko besteht darin, dass das Attribut innerHTML es uns ermöglicht, jeden beliebigen HTML-Code einzufügen, auch wenn es sich um einen schädlichen Code handelt. Auf diesen Aspekt werden wir im nächsten Abschnitt eingehen. MDN empfiehlt die Verwendung von node.textContent, um den Text eines Elements zu ändern. Es ersetzt die untergeordneten Knoten im HTML-Code durch den text, den wir im Parameter textContent zuweisen. Lesen Sie den folgenden Code, um die Verwendung zu verstehen.

<div id="div-element">Hey there!!</div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!'
}

Ausgabe:

Hello bunny!!

Hier wählen wir das HTML-Element div aus, bevor wir den Text ändern. Wir verwenden die Funktion getElementById(), um das Element aus dem DOM abzufragen. Wir verwenden dann den textContent, um den Text des div zu ändern. Diese Änderung wird beim Laden des Bildschirms nicht erkannt. Sobald der Browser die Webseite lädt, wird die Funktion window.onload ausgeführt und die Textänderung erfolgt. So sieht der Endbenutzer immer den neueren Text. Die Änderung des alten Textes in den neuen ist beim Laden des Bildschirms nicht ersichtlich. Wir können auch mit dem textContent in der Methode setTimeOut herumspielen, um die Änderung zu sehen.

Innerer HTML-Versus Sicherheitsaspekt textcontent

Das Attribut innerHTML unterscheidet sich vom textContent. Beide Attribute verwenden text als Eingabe, aber was ist hier die Sicherheitslücke? Im innerHTML ist es möglich, Schadcode einzufügen. Weitere Informationen finden Sie im folgenden Code-Snippet. Hier spiegelt sich die Änderung wider und der innerHTML-Code wird ausgeführt. Wie der folgende Code-Schnipsel zeigt, erscheint beim Anklicken des hellgrünen HTML-Elements div ein unerwünschter Alarm auf dem Bildschirm.

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.innerHTML =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

Wenn wir dem Element div den gleichen Inhalt in textContent zuweisen, wird es nicht als HTML-Element gerendert. Javascript rendert den Inhalt als Text auf dem Bildschirm. So können wir das <div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')"> buchstäblich als Text auf der Webseite sehen. Dieser Aspekt macht Code sicherer und zuverlässiger. Wenn wir also beabsichtigen, den Text eines HTML-Elements zu ändern, empfehlen die Javascript-Best Practices (wie von MDN unterstützt) die Verwendung von textContent anstelle des innerHTML-Attributs.

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

Ändern Sie den div-Text mit dem :after Pseudo-Element

Wenn die Textänderung trivial ist, können wir CSS verwenden, um den div-Text zu ändern. Wir verwenden das Pseudo-HTML-Element :after, wobei wir den anzuzeigenden Text im Attribut content hinzufügen. Sie gilt nicht für HTML-Elemente wie <img>, bei denen der Browser den Inhalt durch das geladene Bild ersetzt. Der folgende Code beschreibt die Verwendung.

<div class="pvw-title"><span>Facts</span></div>

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}