Text zu Element in JavaScript hinzufügen

1. Hinzufügen von Text zu einem bestehenden Textelement in JavaScript über DOM mit appendChild
2. Hinzufügen von Text zu einem bestehenden Textelement in JavaScript über DOM mit textContent
3. Hinzufügen von Text zu einem bestehenden Textelement in JavaScript über DOM mit innerText

Das Ändern von DOM-Inhalten ist die grundlegendste Aufgabe, wenn es um Browser geht. Manchmal möchten wir den DOM-Text basierend auf bestimmten Aktionen ändern, ohne das gesamte DOM neu zu rendern. In diesem Artikel lernen wir, wie man in JavaScript per DOM Text zu einem bestehenden Textelement hinzufügt.

Hinzufügen von Text zu einem bestehenden Textelement in JavaScript über DOM mit appendChild

DOM enthält die Liste der Knoten. Jeder Knoten enthält seine eigenen Daten. JavaScript ermöglicht das Hinzufügen der neuen Knoteninstanz zur Liste der vorhandenen untergeordneten Knoten innerhalb des ausgewählten übergeordneten Knotens.

Syntax:

appendChild(aChild);

Die Funktion appendChild() nimmt den Eingabeparameter eines neu erstellten Knotens oder das häufigste Element, das dem übergeordneten Knoten hinzugefügt werden muss. appendChild() verschiebt das angegebene untergeordnete Element von seiner aktuellen Position an die neue Position, wenn es auf einen vorhandenen Knoten verweist.

Es gibt den Knoten zurück, der das hinzugefügte untergeordnete Element (ein untergeordnetes Element) ist, außer wenn ein untergeordnetes Element ein DocumentFragment ist. In diesem Fall wird das leere DocumentFragment zurückgegeben. Lesen Sie für weitere Informationen die Dokumentation der Methode appendChild.

<p id="p">Hello </p>

<p id="p1">JavaScript Channel </p>

const text = document.createTextNode('Welcome to My channel');
const pNode = document.getElementById('p');
pNode.appendChild(text);

Im obigen Beispiel haben wir den Text-Node mit document.createTextNode("Welcome to My channel") erstellt und diesen dann an den p-Node des Dokuments angehängt. Die Ausgabe des obigen Codes erstellt ein DOM wie unten.

Ausgabe:

"Hello Welcome to My channel"

Hinzufügen von Text zu einem bestehenden Textelement in JavaScript über DOM mit textContent

Es ist die Eigenschaft der Node-schnittstelle, die den textuellen Inhalt des ausgewählten Knotens und seiner Nachkommen darstellt. JavaScript ermöglicht das Hinzufügen des anderen Textes zum aktuellen Textinhalt von untergeordneten Knoten innerhalb des ausgewählten übergeordneten Knotens.

Syntax:

textContent = data;

Die Eigenschaft textContent aktualisiert den Textinhalt des ausgewählten Knotens. Benutzer können die Textdaten nach Bedarf ändern, z. B. durch Verketten, Aktualisieren usw. Wenn der Knoten ein Dokument oder ein Dokumenttyp ist, gibt textContent null zurück. textContent gibt die Verkettung des textContent jedes untergeordneten Knotens für andere Knotentypen zurück, mit Ausnahme von Kommentaren und Verarbeitungsanweisungen. Dies ist eine leere Zeichenfolge, wenn ein Knoten keine Kinder hat. Lesen Sie für weitere Informationen die Dokumentation der Eigenschaft textContent.

const pNode = document.getElementById('p');
pNode.textContent += 'Welcome to My channel';

Im obigen Beispiel haben wir den Absatzknoten mit document.getElementById("p") abgerufen und dann Welcome to my channel zum bestehenden Textinhalt des Absatzknotens hinzugefügt. Die Ausgabe des obigen Codes aktualisiert ein DOM wie folgt:

Ausgabe:

"Hello Welcome to My channel"

Hinzufügen von Text zu einem bestehenden Textelement in JavaScript über DOM mit innerText

Es gehört zum HTMLElement. Diese Eigenschaft stellt den gerenderten Textinhalt des ausgewählten Knotens und seiner Nachkommen dar. JavaScript ermöglicht das Hinzufügen des anderen Textes zum aktuellen Textinhalt von untergeordneten Knoten innerhalb des ausgewählten übergeordneten Knotens.

Syntax:

const renderedText = htmlElement.innerText
htmlElement.innerText = string

Die innerText-Eigenschaft aktualisiert den Textinhalt des ausgewählten Knotens. Benutzer können die Textdaten nach Bedarf ändern, z. B. Verkettung, Aktualisierung usw. Weitere Informationen finden Sie in der Dokumentation der Eigenschaft innerText.

const pNode = document.getElementById('p');
pNode.innerText += 'Welcome to My channel';

Im obigen Beispiel haben wir den Absatzknoten mit document.getElementById("p") abgerufen und dann Welcome to my channel zum bestehenden Textinhalt des Absatzknotens hinzugefügt. Die Ausgabe des obigen Codes aktualisiert ein DOM wie folgt:

Ausgabe:

"Hello Welcome to My channel"

Der einzige Unterschied zwischen textContent und innerText besteht darin, dass textContent den Inhalt aller Elemente erhält, einschließlich der Elemente script und style. Im Gegensatz dazu zeigt innerText nur menschenlesbare Elemente an. textContent gibt alle Elemente des Knotens zurück. innerText hingegen ist stilbewusst und gibt keinen Text aus versteckten Elementen zurück. Grundsätzlich erkennt innerText das gerenderte Erscheinungsbild von Text, textContent jedoch nicht.