Hinzufügen, Löschen, Ändern und Abfragen von HTML

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:

4883ec0eb33c31828b7c767c806e14c7Dies ist ein Container16b28748ea4df4d9c2150843fecfba68

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:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>HTML增加操作</title>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<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>

36cc49f0c466276486e50c850b7e4956
< ;/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:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>HTML删除操作</title>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<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>

36cc49f0c466276486e50c850b7e4956
< ;/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:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>HTML修改操作</title>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<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>

36cc49f0c466276486e50c850b7e4956
< ;/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!