So ändern Sie HTML-Inhalte mit js

JavaScript ist eine weit verbreitete Programmiersprache, die zum Modifizieren von HTML-Inhalten, zum Ändern von CSS-Stilen, zum Hinzufügen dynamischer Effekte, zum Verarbeiten von Benutzereingaben usw. verwendet werden kann. Dieser Artikel konzentriert sich auf die Verwendung von JavaScript zum Ändern von HTML-Inhalten.

1. DOM-Operation

In DOM (Document Object Model) wird jedes HTML-Element als Objekt behandelt. Daher können wir über JavaScript auf die Attribute von HTML-Tags zugreifen und diese ändern.

1. Elemente abrufen

Wir können die Methode document.getElementById() verwenden, um das Element mit der angegebenen ID abzurufen, wie unten gezeigt:

var myElement = document.getElementById("myId");

Ähnlich können wir auch das Element mit dem angegebenen Tag-Namen über getElementsByTagName abrufen ()-Methode, wie folgt:

var myElements = document.getElementsByTagName("p");

2. Ändern Sie den Inhalt des Elements

Nachdem wir das Element erhalten haben, können wir den Inhalt des Elements über das innerHTML-Attribut ändern. Wie unten gezeigt:

myElement.innerHTML = "新的内容";

Sie können das innerHTML-Attribut verwenden, um einfache Textinhaltsänderungen vorzunehmen. Wenn Sie die Attribute des Elements selbst ändern müssen, wie z. B. ID oder Klasse, müssen Sie die JavaScript-Methode setAttribute() verwenden.

3. Erstellen eines neuen Elements

Wir können die Methode document.createElement() verwenden, um ein neues HTML-Element wie unten gezeigt zu erstellen:

var newElement = document.createElement("p");

Der obige Code erstellt ein neues p-Tag, aber diesem Tag wurde nicht hinzugefügt auf der Webseite. Wir müssen Elemente über die Methode appendChild() hinzufügen.

4. Elemente einfügen

Wir können die Methode appendChild() verwenden, um das neu erstellte Element in das angegebene HTML-Element einzufügen, oder wir können die Methode insertBefore() verwenden, um das Element an der angegebenen Position einzufügen. Wie unten gezeigt:

document.body.appendChild(newElement);   //将newElement添加到body元素中
document.body.insertBefore(newElement, nextSibling);   //将newElement插入到nextSibling元素之前

2. jQuery-Bibliotheksoperation

Zusätzlich zu DOM-Operationen können wir auch die jQuery-Bibliothek verwenden, um HTML-Inhalte zu ändern. Die jQuery-Bibliothek ist eine Bibliothek, die speziell dafür entwickelt wurde, JavaScript zu vereinfachen und damit HTML-Elemente schneller und komfortabler zu bedienen.

1. Element abrufen

Wir können das angegebene HTML-Element über den jQuery-Selektor abrufen, wie unten gezeigt:

var myElement = $("#myId");

2. Elementinhalt ändern

Ähnlich wie bei DOM-Operationen können wir Elemente auch über den Inhalt der html()-Methode ändern. wie unten gezeigt:

myElement.html("新的内容");

3. Neues Element erstellen

Wir können die Methode $() verwenden, um ein neues HTML-Element wie unten gezeigt zu erstellen:

var newElement = $("<p></p>");

4. Element einfügen

Ebenso können wir append() verwenden und before()-Methoden fügen das neu erstellte Element in das angegebene HTML-Element ein, wie unten gezeigt:

$("body").append(newElement);   //将newElement添加到body元素中
myElement.before(newElement);   //将newElement插入到myElement之前

3. Zusammenfassung

In diesem Artikel wird hauptsächlich vorgestellt, wie JavaScript HTML-Inhalte verarbeitet. Durch die Einleitung dieses Artikels können Leser die folgenden Inhalte beherrschen:

• DOM-Operationen (Document Object Model) verstehen, die Methoden zum Abrufen, Ändern, Erstellen und Einfügen von Elementen beherrschen;
• JQuery-Bibliotheksoperationen verstehen, Selektoren verwenden, HTML (), Methoden wie $(), append() und before() bedienen HTML-Elemente
• Beherrschen Sie die Grundkenntnisse der JavaScript-Bedienung von HTML und legen Sie den Grundstein für die spätere Entwicklung und Praxis.

Schließlich müssen die Leser mehr üben. Nur wenn Sie selbst üben, können Sie die Methode zur Verwendung von JavaScript zur Bedienung von HTML besser beherrschen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie HTML-Inhalte mit js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!