htmlの追加、削除、変更、クエリ

HTML は Web ページの作成に使用されるマークアップ言語で、タグやタグを使用してページのコンテンツと構造を記述します。 HTML タグは、ページのコンテンツを表示するために使用されるだけでなく、ページのデータの追加、削除、変更などの操作および管理にも使用できます。

HTML の追加、削除、変更、クエリ操作は通常、JavaScript に基づいて実装されます。 JavaScript は、Web ページ上で動的な効果を実現するために HTML ページに埋め込むことができるスクリプト言語です。

この記事では、HTMLの追加、削除、変更、クエリのさまざまな操作の実装を紹介します。

1. HTML のデータ構造

HTML のデータ構造は通常、要素の種類を表すタグと要素の性質を表す属性から構成されます。

例:

4883ec0eb33c31828b7c767c806e14c7これはコンテナです16b28748ea4df4d9c2150843fecfba68

div タグはコンテナ要素とクラスを表します属性 要素のスタイル属性を表します。 HTML には一般的なタグと属性が多数あり、関連する HTML ドキュメントを参照することで学習できます。

2. HTML でのデータ操作

HTML でのデータ操作は、通常、追加、削除、変更の 3 つのカテゴリに分類されます。

1. HTML 追加操作

HTML 追加操作は通常、JavaScript コードによって実装されます。例:

var li = document.createElement("li");
li.innerHTML = "新しいリスト項目";
document.getElementById("list").appendChild(li) ;

上記のコードでは、document.createElement 関数を通じて li タグを作成し、その内容を「新しいリスト項目」に設定してから、document.getElementById 関数を通じて指定された要素への参照を取得します (ここでは、ID が「list」の要素です) に新しい li タグを追加します。

2. HTML の削除操作

HTML の削除操作は、JavaScript コードを通じて実装できます。例:

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

上記のコードdocument.getElementById 関数を通じて指定された要素の参照を取得し (ここでは ID が「list」の要素です)、removeChild 関数を使用して最後の子要素 ​​(ここでは li タグ) を削除します。

3. HTML 変更操作

HTML 変更操作は、JavaScript コードを通じて実装できます。例:

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

上記のコードでは、document.getElementById 関数を通じて指定された要素を取得します。 (この場合はIDが「list」の要素)を参照し、最初の子要素(この場合はliタグ)の内容を「変更されたリスト項目」に変更します。

3. HTML の追加、削除、変更、クエリの例

以下では、HTML の追加、削除、変更、クエリ操作の実装を理解するために例を使用します。

1. HTML 追加操作例:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

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

82a735c72ba30f96210377df991ebafe

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

上記のコードでは、「リスト項目の追加」を含むボタンを作成します。 " ボタン。順序なしリストを含む HTML ドキュメントと、ID が "list" の JavaScript コード。 「リスト項目の追加」ボタンをクリックすると、addItem関数が実行され、ID「list」を持つ順序なしリストに新しいliタグが追加され、その内容が「新しいリスト項目」に設定されます。

2. HTML 削除操作例:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

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

82a735c72ba30f96210377df991ebafe

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

上記のコードでは、「最後のリスト項目を削除する」を含むリストを作成します。 " ボタンの HTML ドキュメント、ID が "list" の順序なしリスト、および JavaScript コード。 [最後のリスト項目を削除] ボタンをクリックすると、deleteItem 関数が実行され、ID が「list」である順序なしリストの最後の li タグが削除されます。

3. HTML 変更操作の例:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

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

82a735c72ba30f96210377df991ebafe

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

上記のコードでは、「最初のリスト項目を変更する」を含むリストを作成しました。 " ボタン、ID が "list" の順序なしリスト、および JavaScript コードを含む HTML ドキュメント。 [最初のリスト項目を変更] ボタンをクリックすると、modifyItem 関数が実行され、ID が「list」である順序なしリストの最初の li タグの内容が「変更されたリスト項目」に変更されます。

概要:

この記事では、HTML での追加、削除、変更、クエリ操作を紹介し、JavaScript コードを介してページ データの動的な操作を実現します。 HTML の追加、削除、変更、クエリ操作により、ページ上のデータがより柔軟かつ動的になり、ユーザーはより優れたインタラクティブなエクスペリエンスを得ることができます。読者が HTML の追加、削除、変更、クエリの知識を学び、応用できるようになることを願っています。

以上がhtmlの追加、削除、変更、クエリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。