使用 JS 创建具有 ID 属性的元素

作者

使用 JS 创建具有 ID 属性的元素

Create an element with ID attribute using JS

要创建具有 id 属性的元素：

  1. 使用document.createElement()方法创建元素。
  2. 使用setAttribute()方法id在元素上设置属性。
  3. 使用 方法将元素添加到页面appendChild()。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <style>
    #my-id {
      background-color: tomato;
      color: aliceblue;
      width: 150px;
      height: 150px;
    }
  </style>

  <body>
    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
// ✅ Create element
const el = document.createElement('div');

// ✅ Set ID attribute on element
el.setAttribute('id', 'my-id');

// ✅ Add text content to element
el.textContent = 'Hello world';

// ✅ Or set the innerHTML of the element
// el.innerHTML = `<span>Hello world</span>`;

// ✅ add element to DOM
const box = document.getElementById('box');
box.appendChild(el);

我们使用
document.createElement
方法来创建元素。

我们传递给该方法的唯一参数是要创建的元素的类型（div在示例中）。

该createElement方法返回新创建的元素。

我们使用
setAttribute
方法id在元素上设置属性。

该setAttribute方法有两个参数：

  1. name– 要设置其值的属性的名称。
  2. value– 分配给属性的值。

在示例中，我们将元素id属性的值设置为my-id。

如果该属性已存在，则更新该值，否则添加具有指定名称和值的新属性。

您可以使用
textContent
属性设置元素的文本内容，或使用
innerHTML
属性设置元素的内部 HTML 标记。

您不应该在innerHTML不转义的情况下将属性与用户提供的数据一起使用。这将使您的应用程序容易受到跨站点脚本攻击。

您可以使用
appendChild
方法将元素添加到页面。

该方法将一个节点添加到调用它的元素的子元素列表的末尾。

如果我加载示例中的页面，我可以看到该id属性已设置在新创建的元素上。

id设置成功

该页面显示已应用style指定范围内的标签样式。id

id 样式应用成功

–