html addition, deletion, modification and query

HTML is a markup language used to create web pages. It uses tags and tags to describe the content and structure of the page. HTML tags are not only used to present the content of the page, but can also be used to operate and manage the data of the page, including adding, deleting, and modifying.

HTML addition, deletion, modification and query operations are usually implemented based on JavaScript. JavaScript is a scripting language that can be embedded in HTML pages to achieve dynamic effects on Web pages.

In this article, we will introduce the implementation of various operations of HTML addition, deletion, modification and query.

1. Data structure in HTML

The data structure in HTML usually consists of tags and attributes. Tags represent the type of elements, and attributes represent the characteristics of elements.

For example:

4883ec0eb33c31828b7c767c806e14c7This is a container16b28748ea4df4d9c2150843fecfba68

The div tag represents a container element, and the class attribute It represents the style attribute of the element. There are many common tags and attributes in HTML, which can be learned by referring to the relevant HTML documents.

2. Data operations in HTML

Data operations in HTML are usually divided into three categories: add, delete and modify.

1. HTML addition operation

HTML addition operation is usually implemented through JavaScript code. For example:

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

In the above code, we create a li tag through the document.createElement function, set its content to "New List Item", and then obtain the reference to the specified element through the document.getElementById function (here it is element with id "list") and add a new li tag to it.

2. HTML deletion operation

HTML deletion operation can be implemented through JavaScript code. For example:

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

In the above code, we Obtain the reference of the specified element through the document.getElementById function (here it is the element with the id "list"), and use the removeChild function to delete the last child element (here the li tag).

3. HTML modification operation

HTML modification operation can be implemented through JavaScript code. For example:

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

In the above code, we obtain the specified element through the document.getElementById function Reference (in this case, the element with the id "list"), and modify the content of the first child element (in this case, the li tag) to "modified list item".

3. Example of HTML addition, deletion, modification and query

Below we use an example to understand the implementation of HTML addition, deletion, modification and query operation.

1. HTML adding operation example:

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

In the above code, we create a button that contains the "Add List Item" button, An HTML document with an unordered list and JavaScript code with the id "list". When the "Add List Item" button is clicked, the addItem function will be executed, a new li tag will be added to the unordered list with the id "list", and its content will be set to "New List Item".

2. HTML deletion operation example:

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

In the above code, we create a list containing "Delete the last list item" HTML document of button, unordered list with id "list" and JavaScript code. When the "Delete Last List Item" button is clicked, the deleteItem function will be executed to delete the last li tag in the unordered list with the id "list".

3. HTML modification operation example:

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

In the above code, we created a list containing "Modify the first list item " button, an unordered list with the id "list" and an HTML document with JavaScript code. When the "Modify First List Item" button is clicked, the modifyItem function will be executed to modify the content of the first li tag in the unordered list with the id "list" to "modified list item".

Summary:

This article introduces the addition, deletion, modification and query operations in HTML, and realizes the dynamic operation of page data through JavaScript code. The addition, deletion, modification and query operations of HTML can make the data on the page more flexible and dynamic, allowing users to have a better interactive experience. I wish readers success in learning and applying the knowledge of HTML addition, deletion, modification and query.

The above is the detailed content of html addition, deletion, modification and query. For more information, please follow other related articles on the PHP Chinese website!