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.
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");
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.
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.
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.
Wir können das angegebene HTML-Element über den jQuery-Selektor abrufen, wie unten gezeigt:
var myElement = $("#myId");
Ähnlich wie bei DOM-Operationen können wir Elemente auch über den Inhalt der html()-Methode ändern. wie unten gezeigt:
myElement.html("新的内容");
Wir können die Methode $() verwenden, um ein neues HTML-Element wie unten gezeigt zu erstellen:
var newElement = $("<p></p>");
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:
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!