HTML 추가, 삭제, 수정 및 쿼리

HTML은 웹 페이지를 만드는 데 사용되는 마크업 언어입니다. 마크업과 태그를 사용하여 페이지의 내용과 구조를 설명합니다. HTML 태그는 페이지의 내용을 표현하는 데 사용될 뿐만 아니라 페이지의 데이터를 추가, 삭제, 수정하는 등의 조작 및 관리에도 사용할 수 있습니다.

HTML 추가, 삭제, 수정 및 쿼리 작업은 일반적으로 JavaScript를 기반으로 구현됩니다. JavaScript는 웹 페이지에 동적 효과를 얻기 위해 HTML 페이지에 포함될 수 있는 스크립팅 언어입니다.

이 글에서는 HTML 추가, 삭제, 수정, 쿼리 등 다양한 작업의 구현 방법을 소개하겠습니다.

1. HTML의 데이터 구조

HTML의 데이터 구조는 일반적으로 태그와 속성으로 구성됩니다. 태그는 요소의 유형을 나타내고 속성은 요소의 특성을 나타냅니다.

예:

4883ec0eb33c31828b7c767c806e14c7이것은 컨테이너입니다16b28748ea4df4d9c2150843fecfba68

그 중 div 태그는 컨테이너 요소를 나타내고, class 속성은 해당 요소의 스타일 속성을 나타냅니다. HTML에는 공통적인 태그와 속성이 많이 있으며, 관련 HTML 문서를 참조하여 학습할 수 있습니다.

2. HTML의 데이터 작업

HTML의 데이터 작업은 일반적으로 추가, 삭제 및 수정의 세 가지 범주로 나뉩니다.

1. HTML 추가 작업

HTML 추가 작업은 일반적으로 JavaScript 코드를 통해 구현됩니다. 예:

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

위 코드에서, document.createElement 함수를 통해 li 태그를 생성하고 해당 콘텐츠를 "New List Item"으로 설정한 다음 document.getElementById 함수를 통해 지정된 요소에 대한 참조를 얻습니다(여기서는 ID가 "list"인 요소입니다). 새 li 태그가 추가됩니다.

2. HTML 삭제 작업

HTML 삭제 작업은 JavaScript 코드를 통해 구현할 수 있습니다. 예:

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

위 코드에서는 문서를 통해 지정된 요소를 얻습니다. getElementById 함수 참조(이 경우 ID가 "list"인 요소)를 삭제하고, RemoveChild 함수를 사용하여 그 안의 마지막 하위 요소(이 경우 li 태그)를 제거합니다.

3. HTML 수정 작업

HTML 수정 작업은 JavaScript 코드를 통해 구현할 수 있습니다. 예:

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

위 코드에서는 document.getElementById 함수를 통해 지정된 요소의 참조를 얻습니다(여기서 ID는 " 목록" 요소), 첫 번째 하위 요소(여기서는 li 태그)의 콘텐츠를 "수정된 목록 항목"으로 수정합니다.

3. HTML 추가, 삭제, 수정 및 쿼리의 예

아래에서는 HTML 추가, 삭제, 수정 및 쿼리 작업의 구현을 이해하기 위해 예를 사용합니다.

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

위 코드에서는 "목록 항목 추가" 버튼, ID가 "list"인 순서가 지정되지 않은 목록 및 JavaScript 코드가 포함된 HTML 문서를 생성합니다. "목록 항목 추가" 버튼을 클릭하면 addItem 함수가 실행되고, ID가 "list"인 정렬되지 않은 목록에 새 li 태그가 추가되고 해당 내용이 "새 목록 항목"으로 설정됩니다.

2. HTML 삭제 작업 예:

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>

위 코드에서는 "마지막 목록 항목 삭제" 버튼, ID가 "list"인 순서가 지정되지 않은 목록 및 JavaScript 코드가 포함된 HTML 문서를 생성합니다. "마지막 목록 항목 삭제" 버튼을 클릭하면 deleteItem 함수가 실행되어 ID가 "list"인 정렬되지 않은 목록의 마지막 li 태그를 삭제합니다.

3. HTML 수정 작업 예:

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>

위 코드에서는 "첫 번째 목록 항목 수정" 버튼, ID가 "list"인 순서가 지정되지 않은 목록 및 JavaScript 코드가 포함된 HTML 문서를 생성합니다. "첫 번째 목록 항목 수정" 버튼을 클릭하면 수정 항목 함수가 실행되어 ID가 "list"인 정렬되지 않은 목록의 첫 번째 li 태그 내용을 "수정된 목록 항목"으로 수정합니다.

요약:

이 글에서는 HTML의 추가, 삭제, 수정 및 쿼리 작업을 소개하고 JavaScript 코드를 통해 페이지 데이터의 동적 작업을 실현합니다. HTML의 추가, 삭제, 수정 및 검색 작업을 통해 페이지의 데이터를 더욱 유연하고 동적으로 만들 수 있으므로 사용자는 더 나은 대화형 경험을 누릴 수 있습니다. 나는 독자들이 HTML 추가, 삭제, 수정 및 쿼리에 대한 지식을 배우고 적용하는 데 성공하기를 바랍니다.

위 내용은 HTML 추가, 삭제, 수정 및 쿼리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!