JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

2023年6月10日上午11:55 • JavaScript

对于JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析，我们可以按照以下步骤进行攻略。

1. 简介

在前端开发中，我们经常需要对HTML文档中的元素进行操作。HTML DOM (Document Object Model)提供了一系列操作HTML文档元素的方法，使得我们可以方便地实现对元素的新增、编辑和删除等操作。

2. 元素的新增

2.1. 使用createElement方法创建元素

使用createElement方法可以在JavaScript中创建新的HTML元素，如下所示：

var newElement = document.createElement('div');

这里我们创建了一个新的div元素。可以根据需要调用createElement方法创建需要的元素，例如p，img，a等。

2.2. 使用appendChild方法添加元素

使用appendChild方法可以将一个新的元素添加到HTML文档的指定位置，如下所示：

var parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);

这里我们将新创建的div元素添加到id为parent的元素中。

3. 元素的编辑

3.1. 使用innerHTML属性编辑元素内容

使用innerHTML属性可以对元素中的内容进行编辑，如下所示：

var element = document.getElementById('myElement');
element.innerHTML = 'Hello World';

这里我们将id为myElement的元素中的内容修改为Hello World。

3.2. 使用setAttribute方法编辑元素属性

使用setAttribute方法可以对元素中的属性进行编辑，如下所示：

var element = document.getElementById('myElement');
element.setAttribute('class', 'myClass');

这里我们将id为myElement的元素的class属性修改为myClass。

4. 元素的删除

4.1. 使用removeChild方法删除元素

使用removeChild方法可以将一个元素从HTML文档中删除，如下所示：

var parentElement = document.getElementById('parent');
parentElement.removeChild(element);

这里我们将父元素id为parent中的某个子元素从HTML文档中删除。

4.2. 使用innerHTML属性清空元素内容

使用innerHTML属性可以将元素中的所有内容清空，如下所示：

var element = document.getElementById('myElement');
element.innerHTML = '';

这里我们将id为myElement的元素中的所有内容清空。

5. 示例说明

5.1. 新增元素示例

例如，在一个网页中，我们需要动态添加一些新的列表项。可以使用以下代码实现：

<!DOCTYPE html>
<html>
  <head>
    <script>
      function addItem() {
        var newItem = document.createElement("li");
        var textnode = document.createTextNode("New Item");
        newItem.appendChild(textnode);
        document.getElementById("myList").appendChild(newItem);
      }
    </script>
  </head>
  <body>
    <ul id="myList">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <button onclick="addItem()">Add Item</button>
  </body>
</html>

这里我们动态添加列表项时，先使用createElement方法创建一个新的li元素，并使用createTextNode方法创建一个文本节点，然后通过appendChild方法添加文本节点到li元素中，最后将li元素添加到id为myList的ul元素中。当用户点击Add Item按钮时，addItem函数会被调用，新的列表项就会被添加到页面中。

5.2. 删除元素示例

例如，在一个表格中，我们需要删除一些行，可以使用以下代码实现：

<!DOCTYPE html>
<html>
  <head>
    <script>
      function deleteRow(row) {
        var i = row.parentNode.parentNode.rowIndex;
        document.getElementById('myTable').deleteRow(i);
      }
    </script>
  </head>
  <body>
    <table id="myTable">
      <tr>
        <td>Row 1</td>
        <td><button onclick="deleteRow(this)">Delete</button></td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td><button onclick="deleteRow(this)">Delete</button></td>
      </tr>
      <tr>
        <td>Row 3</td>
        <td><button onclick="deleteRow(this)">Delete</button></td>
      </tr>
    </table>
  </body>
</html>

这里我们使用deleteRow方法删除表格中的一行。当用户点击Delete按钮时，deleteRow函数会被调用，在该函数中，我们通过parentNode属性找到该按钮所在的行，然后通过parentNode又找到该行所在的tbody元素，并使用deleteRow方法删除该行。当然，这里也可以使用其他的方法删除元素，例如removeChild方法，详情请参考前述内容。

以上就是JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析的完整攻略。希望能对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析 - Python技术站