HTML ist eine Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Sie verwendet Markup und Tags, um den Inhalt und die Struktur der Seite zu beschreiben. HTML-Tags werden nicht nur zur Darstellung des Inhalts der Seite verwendet, sondern können auch zum Bedienen und Verwalten der Daten der Seite verwendet werden, einschließlich Hinzufügen, Löschen und Ändern.
HTML-Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge werden normalerweise basierend auf JavaScript implementiert. JavaScript ist eine Skriptsprache, die in HTML-Seiten eingebettet werden kann, um dynamische Effekte auf Webseiten zu erzielen.
In diesem Artikel stellen wir die Implementierung verschiedener Vorgänge zum Hinzufügen, Löschen, Ändern und Abfragen von HTML vor.
1. Datenstruktur in HTML
Die Datenstruktur in HTML besteht normalerweise aus Tags und Attributen. Tags repräsentieren den Typ von Elementen und Attribute repräsentieren die Eigenschaften von Elementen.
Zum Beispiel:
Dabei repräsentiert das div-Tag ein Containerelement und das Klassenattribut das Stilattribut des Elements. Es gibt viele gängige Tags und Attribute in HTML, die Sie in der entsprechenden HTML-Dokumentation nachlesen können.
2. Datenoperationen in HTML
Datenoperationen in HTML werden normalerweise in drei Kategorien unterteilt: Hinzufügen, Löschen und Ändern.
1. HTML-Additionsoperation
HTML-Additionsoperation wird normalerweise durch JavaScript-Code implementiert. Zum Beispiel:
var li = document.createElement("li");
li.innerHTML = "Neues Listenelement";
document.getElementById("list").appendChild(li);
Im obigen Code: Wir erstellen ein li-Tag über die Funktion document.createElement, setzen seinen Inhalt auf „Neues Listenelement“ und erhalten dann den Verweis auf das angegebene Element über die Funktion document.getElementById (hier ist es das Element mit der ID „list“). und fügen Sie das neue hinzu. Das li-Tag wird hinzugefügt.
2. HTML-Löschvorgang
Der HTML-Löschvorgang kann über JavaScript-Code implementiert werden. Zum Beispiel:
var li = document.getElementById("list").lastChild;
document.getElementById("list").removeChild(li);
Im obigen Code erhalten wir das angegebene Element über das Dokument. getElementById-Funktionsreferenz (in diesem Fall das Element mit der ID „list“) und verwenden Sie die Funktion „removeChild“, um das letzte untergeordnete Element darin zu entfernen (in diesem Fall das li-Tag).
3. HTML-Änderungsvorgang
HTML-Änderungsvorgang kann über JavaScript-Code implementiert werden. Zum Beispiel:
document.getElementById("list").firstChild.innerHTML = "Modified list item";
Im obigen Code erhalten wir die Referenz des angegebenen Elements über die Funktion document.getElementById (hier ist die ID). „list“-Element) und ändern Sie den Inhalt des ersten untergeordneten Elements (hier das li-Tag) in „modified list item“.
3. Beispiel für das Hinzufügen, Löschen, Ändern und Abfragen von HTML
Im Folgenden verwenden wir ein Beispiel, um die Implementierung des Hinzufügens, Löschens, Änderns und Abfragens von HTML zu verstehen.
1. Beispiel für einen HTML-Hinzufügenvorgang:
<title>HTML增加操作</title>
<button onclick="addItem()">添加列表项</button>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<script>
function addItem() {
var li = document.createElement("li");
li.innerHTML = "新增列表项";
document.getElementById("list").appendChild(li);
}
</script>
< ;/html>
Im obigen Code erstellen wir ein HTML-Dokument, das eine Schaltfläche „Listenelement hinzufügen“, eine ungeordnete Liste mit der ID „list“ und JavaScript-Code enthält. Wenn auf die Schaltfläche „Listenelement hinzufügen“ geklickt wird, wird die Funktion „addItem“ ausgeführt, ein neues li-Tag mit der ID „list“ zur ungeordneten Liste hinzugefügt und sein Inhalt auf „Neues Listenelement“ gesetzt.
2. Beispiel für einen HTML-Löschvorgang:
<title>HTML删除操作</title>
<button onclick="deleteItem()">删除最后一个列表项</button>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<script>
function deleteItem() {
var li = document.getElementById("list").lastChild;
document.getElementById("list").removeChild(li);
}
</script>
< ;/html>
Im obigen Code erstellen wir ein HTML-Dokument, das eine Schaltfläche „Letztes Listenelement löschen“, eine ungeordnete Liste mit der ID „list“ und JavaScript-Code enthält. Wenn auf die Schaltfläche „Letztes Listenelement löschen“ geklickt wird, wird die Funktion „deleteItem“ ausgeführt, um das letzte li-Tag in der ungeordneten Liste mit der ID „list“ zu löschen.
3. Beispiel für einen HTML-Änderungsvorgang:
<title>HTML修改操作</title>
<button onclick="modifyItem()">修改第一个列表项</button>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<script>
function modifyItem() {
document.getElementById("list").firstChild.innerHTML = "修改后的列表项";
}
</script>
< ;/html>
Im obigen Code erstellen wir ein HTML-Dokument, das eine Schaltfläche „Erstes Listenelement ändern“, eine ungeordnete Liste mit der ID „list“ und JavaScript-Code enthält. Wenn auf die Schaltfläche „Erstes Listenelement ändern“ geklickt wird, wird die Funktion „modifyItem“ ausgeführt, um den Inhalt des ersten li-Tags in der ungeordneten Liste mit der ID „list“ in „geändertes Listenelement“ zu ändern.
Zusammenfassung:
Dieser Artikel stellt die Hinzufügungs-, Lösch-, Änderungs- und Suchvorgänge in HTML vor und realisiert den dynamischen Betrieb von Seitendaten durch JavaScript-Code. Das Hinzufügen, Löschen, Ändern und Suchen von HTML kann die Daten auf der Seite flexibler und dynamischer machen und Benutzern ein besseres interaktives Erlebnis ermöglichen. Ich wünsche den Lesern viel Erfolg beim Erlernen und Anwenden der Kenntnisse über das Hinzufügen, Löschen, Ändern und Abfragen von HTML.
Das obige ist der detaillierte Inhalt vonHinzufügen, Löschen, Ändern und Abfragen von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
