ajout, suppression, modification et requête HTML

HTML est un langage de balisage utilisé pour créer des pages Web. Il utilise du balisage et des balises pour décrire le contenu et la structure de la page. Les balises HTML ne sont pas seulement utilisées pour présenter le contenu de la page, mais peuvent également être utilisées pour exploiter et gérer les données de la page, y compris l'ajout, la suppression et la modification.

Les opérations d'ajout, de suppression, de modification et de requête HTML sont généralement mises en œuvre sur la base de JavaScript. JavaScript est un langage de script qui peut être intégré dans des pages HTML pour obtenir des effets dynamiques sur les pages Web.

Dans cet article, nous présenterons la mise en œuvre de diverses opérations d'ajout, de suppression, de modification et de requête HTML.

1. Structure des données en HTML

La structure des données en HTML se compose généralement de balises et d'attributs. Les balises représentent le type d'éléments et les attributs représentent les caractéristiques des éléments.

Par exemple :

4883ec0eb33c31828b7c767c806e14c7Ceci est un conteneur16b28748ea4df4d9c2150843fecfba68

Parmi eux, la balise div représente un élément conteneur et l'attribut class représente l'attribut style de l'élément. Il existe de nombreuses balises et attributs communs en HTML, qui peuvent être appris en se référant à la documentation HTML appropriée.

2. Opérations sur les données en HTML

Les opérations sur les données en HTML sont généralement divisées en trois catégories : ajout, suppression et modification.

1.Opération d'ajout HTML

L'opération d'ajout HTML est généralement implémentée via du code JavaScript. Par exemple :

var li = document.createElement("li");
li.innerHTML = "New list item";
document.getElementById("list").appendChild(li);

Dans le code ci-dessus, nous créons une balise li via la fonction document.createElement, définissons son contenu sur "Nouvel élément de liste", puis obtenons la référence à l'élément spécifié via la fonction document.getElementById (ici c'est l'élément avec l'identifiant "list"), et ajoutez le nouveau La balise li y est ajoutée.

2. Opération de suppression HTML

L'opération de suppression HTML peut être implémentée via du code JavaScript. Par exemple :

var li = document.getElementById("list").lastChild;
document.getElementById("list").removeChild(li);

Dans le code ci-dessus, nous obtenons l'élément spécifié via le document. getElementById référence de la fonction (dans ce cas, l'élément avec l'identifiant "list") et utilisez la fonction RemoveChild pour supprimer le dernier élément enfant (dans ce cas, la balise li).

3. Opération de modification HTML

L'opération de modification HTML peut être implémentée via du code JavaScript. Par exemple :

document.getElementById("list").firstChild.innerHTML = "Modified list item";

Dans le code ci-dessus, on obtient la référence de l'élément spécifié via la fonction document.getElementById (ici l'id est " élément liste") et modifiez le contenu du premier élément enfant (ici la balise li) en "élément de liste modifié".

3. Exemple d'ajout, de suppression, de modification et de requête HTML

Ci-dessous, nous utilisons un exemple pour comprendre la mise en œuvre des opérations d'ajout, de suppression, de modification et de requête HTML.

1. ;/html>

Dans le code ci-dessus, nous créons un document HTML contenant un bouton "Ajouter un élément de liste", une liste non ordonnée avec l'identifiant "liste" et du code JavaScript. Lorsque vous cliquez sur le bouton "Ajouter un élément de liste", la fonction addItem sera exécutée, une nouvelle balise li sera ajoutée à la liste non ordonnée avec l'identifiant "liste", et son contenu sera défini sur "Nouvel élément de liste".

2. Exemple d'opération de suppression HTML :

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>

Dans le code ci-dessus, nous créons un document HTML contenant un bouton "Supprimer le dernier élément de la liste", une liste non ordonnée avec l'identifiant "liste" et du code JavaScript. Lorsque vous cliquez sur le bouton "Supprimer le dernier élément de la liste", la fonction deleteItem sera exécutée pour supprimer la dernière balise li de la liste non ordonnée avec l'identifiant "liste".

3. ;/html>

Dans le code ci-dessus, nous créons un document HTML contenant un bouton "Modifier le premier élément de la liste", une liste non ordonnée avec l'identifiant "liste" et du code JavaScript. Lorsque vous cliquez sur le bouton "Modifier le premier élément de la liste", la fonction modifierItem sera exécutée pour modifier le contenu de la première balise li de la liste non ordonnée avec l'identifiant "liste" en "élément de liste modifié".

Résumé :

Cet article présente les opérations d'ajout, de suppression, de modification et de requête en HTML, et réalise le fonctionnement dynamique des données de page via du code JavaScript. Les opérations d'ajout, de suppression, de modification et de recherche de HTML peuvent rendre les données de la page plus flexibles et dynamiques, permettant aux utilisateurs d'avoir une meilleure expérience interactive. Je souhaite aux lecteurs du succès dans l'apprentissage et l'application des connaissances en matière d'ajout, de suppression, de modification et de requête HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!