JavaScript编程: .创建HTML元素

DOM 的 `Document` 接口

DOM 的 Document 接口提供了许多功能，包括创建新元素、为其添加属性和内容，并将它们与现有的 DOM 树合并。

createElement() 用于创建一个元素。
createAttribute() 用于创建一个属性，可以将其分配给新元素或已存在的元素。
setAttribute() 用于创建一个属性并将其与现有元素关联。
appendChild() 用于将一个元素添加到另一个元素中。

创建元素

// 创建一个 <p> 元素
const p = document.createElement("p");
// 为其设置内容
p.innerHTML = "The new paragraph.";

到此为止，元素和其内容已经创建。但它们还没有被加入到 DOM 中，它们仅存在于 JavaScript 引擎的内存中。为了将它们添加到页面中，我们需要获取 body 或其他现有元素，并将新元素作为其最后一个子元素。

const body = document.getElementById("body");
body.appendChild(p);

整体的 HTML 和 JavaScript 代码如下：

<!DOCTYPE html>
<html>
<head>
  <script>
    function show() {
      "use strict";

      // 创建一个 <p> 元素
      const p = document.createElement("p");
      // 设置内容
      p.innerHTML = "The new paragraph.";

      // 将其加入到 body 中
      const body = document.getElementById("body");
      body.appendChild(p);
    }
  </script>
</head>

<body id="body" style="margin:2em">
  <button id="buttonShow" onclick="show()">Start</button>
</body>
</html>

原始页面中并没有段落。但当你点击按钮后，段落将被加入到页面中并可见。顺便提一下：你可以点击按钮多次，看看会发生什么？

创建属性

属性可以通过 createAttribute() 或 setAttribute() 函数创建。前者类似于 createElement()，它只在内存中创建新的属性，但不与其他元素建立连接。而 setAttribute() 直接将新属性添加到元素中，因此我们通常使用这个方法。

以下示例使用 <a> 元素及其 href 属性：

// 创建一个 <a> 元素
const anchor = document.createElement("a");
// 设置其内容
anchor.innerHTML = "The IANA example domain.";
// 设置其 'href' 属性
anchor.setAttribute("href", "https://www.example.com");

现在，元素、属性和内容都已经创建。接下来，我们将它们添加到页面中，就像之前那样。

整体的 HTML 和 JavaScript 代码如下：

<!DOCTYPE html>
<html>
<head>
  <script>
    function show() {
      "use strict";

      // 创建一个 <a> 元素
      const anchor = document.createElement("a");
      // 设置其内容
      anchor.innerHTML = "The IANA example domain.";
      // 设置其 'href' 属性
      anchor.setAttribute("href", "https://www.example.com");

      // 将元素及其属性添加到 body 中
      const body = document.getElementById("body");
      body.appendChild(anchor);
    }
  </script>
</head>

<body id="body" style="margin:2em">
  <button id="buttonShow" onclick="show()">Start</button>
</body>
</html>

原始页面没有链接。但点击按钮后，指向 IANA 示例页面的链接将被添加到页面中并可使用。

替代语法

在之前的页面中，已经介绍了如何使用不同的语法来改变属性。

element_name.attribute_name = "new value";

只需使用元素及其属性名并赋予新的属性值。如果将之前的示例更改为这种语法，您将获得相同的行为：

anchor.href = "https://www.example.com";
// 替代上述代码：
// anchor.setAttribute("href", "https://www.example.com");

连接元素

前面展示的函数创建了元素和属性。这些新对象可以通过嵌套的方式连接起来，形成更大的部分，并且可以连接到现有的 HTML 页面或 DOM 树中。

const div = document.getElementById("div_1");
const anchor = document.createElement("a");
div.appendChild(anchor);

错误使用 `innerHTML`

可以通过为元素的 innerHTML 属性分配新值来改变元素的内容。如果新值包含 HTML 片段的字符串表示形式，那么该分配会在元素内创建子节点。虽然这可能有效，但并不是使用 innerHTML 的推荐方式。

const elem = document.getElementById("p1");
elem.innerHTML = "New text in the paragraph.<p>next P</p><p>and even one more P</p>";
// 结果：
<p id="p1">New text in the paragraph
  <p>next P</p>
  <p>and even one more P</p>
</p>

JavaScript 片段插入了两个额外的段落，但这些段落并没有位于第一个段落之后，而是存在于第一个段落内。

`write()`

已经过时的 document.write() 函数曾经能够将新元素插入到 HTML 页面中，但现在强烈不推荐使用它。

参考资料

最后修改: 2025年01月13日星期一 15:10

DOM 的 Document 接口