📌  相关文章
📜  使用 javascript 生成 html(1)

📅  最后修改于: 2023-12-03 15:22:12.790000             🧑  作者: Mango

使用 JavaScript 生成 HTML

在 Web 开发中，我们经常需要动态生成 HTML 内容。使用 JavaScript 可以很方便地实现这一功能。

DOM 的介绍

DOM 是 Document Object Model 的缩写，它是一种用于表述文档的模型。在 Web 开发中，我们通常使用 DOM API 来操作 HTML 页面中的元素。DOM 树是由 HTML 标​​签和文本节点组成的，每个 HTML 标​​签都是一个节点，而文本则是节点的内容。

创建节点

在 JavaScript 中，我们可以通过一些 API 来创建各种类型的节点，如 Element、Text、Comment 等等。以下是创建常见节点的示例：

// 创建一个 div 元素
const div = document.createElement('div');

// 创建一个文本节点
const text = document.createTextNode('Hello World');

// 创建一个注释节点
const comment = document.createComment('This is a comment');

其中，document 对象代表整个 HTML 页面，通过调用 createElement 方法可以创建一个新的元素节点，传入元素的标签名即可。调用 createTextNode 方法可以创建一个文本节点，传入文本内容即可。调用 createComment 方法可以创建一个注释节点，传入注释内容即可。

操作节点

创建好节点之后，我们可以通过 DOM API 来操作这些节点，包括添加节点、删除节点、修改节点属性等等。以下是常见的操作节点的示例：

// 添加一个子元素
div.appendChild(text);

// 修改元素的属性
div.setAttribute('class', 'example');

// 删除一个子元素
div.removeChild(text);

// 替换一个子元素
div.replaceChild(comment, text);

其中，通过 appendChild 方法可以将一个节点添加到另一个节点的末尾。通过 setAttribute 方法可以修改一个元素的某个属性，传入属性名和属性值即可。通过 removeChild 方法可以删除一个元素的子元素。通过 replaceChild 方法可以替换一个元素的子元素，传入新的节点和被替换的节点即可。

完整示例

下面是一个完整的示例，使用 JavaScript 动态创建一个包含表格和按钮的页面，当点击按钮时在表格中添加一行数据：

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <div id="container">
    <button id="add">Add Row</button>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody id="tableBody">
      </tbody>
    </table>
  </div>
  <script>
    const container = document.getElementById('container');
    const addBtn = document.getElementById('add');
    const tableBody = document.getElementById('tableBody');
    let id = 1;

    addBtn.addEventListener('click', () => {
      const row = document.createElement('tr');
      const idCol = document.createElement('td');
      const nameCol = document.createElement('td');
      const ageCol = document.createElement('td');
      idCol.textContent = id++;
      nameCol.textContent = 'John';
      ageCol.textContent = '25';
      row.appendChild(idCol);
      row.appendChild(nameCol);
      row.appendChild(ageCol);
      tableBody.appendChild(row);
    });
  </script>
</body>
</html>

通过 document.getElementById 方法可以获取页面中的元素，之后就可以像示例中一样操作节点了。