教程 > TypeScript 教程 > TypeScript 扩展知识 阅读：1133

使用 TypeScript 如何创建 HTML 元素

要在 TypeScript 中创建 HTML 元素：

  1. 使用 document.createElement() 方法创建元素。
  2. 在创建的元素上设置任何属性或内部 html。
  3. 使用 appendChild() 方法将元素添加到页面。

这是本文中示例的 HTML。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="box"></div>

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

这是相关的 TypeScript 代码。

const el = document.createElement('div');

//  将文本内容添加到元素
el.textContent = 'Hello world';

//  或者设置元素的innerHTML
// el.innerHTML = `<span>Hello world</span>`;

// （可选）在元素上设置属性
el.setAttribute('title', 'my-title');

//  （可选）在元素上设置样式
// el.style.backgroundColor = 'salmon';
// el.style.color = 'white';

// 将元素添加到 DOM
const box = document.getElementById('box');

box?.appendChild(el);

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

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

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

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

这是一个设置元素内部 HTML 的示例。

const el = document.createElement('div');

el.innerHTML = `
  <span style="background-color: salmon; color: white;">
    Hello world
  </span>
`;

// （可选）在元素上设置属性
el.setAttribute('title', 'my-title');

// （可选）在元素上设置样式
// el.style.backgroundColor = 'salmon';
// el.style.color = 'white';

// 将元素添加到 DOM
const box = document.getElementById('box');

box?.appendChild(el);

我使用反引号 ``（不是单引号）来包装 HTML 字符串，因为反引号允许我们轻松创建多行字符串。

我们不应该将 innerHTML 属性与用户提供的数据一起使用而不对其进行转义。 这将使我们的应用程序容易受到跨站点脚本攻击。

如果需要在元素上设置属性，需要使用 setAttribute 方法。

setAttribute 方法有 2 个参数：

  • name - 要设置其值的属性的名称。
  • value - 分配给属性的值。

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

const el = document.createElement('div');

el.innerHTML = `
  <span style="background-color: salmon; color: white;">
    Hello world
  </span>
`;

el.setAttribute('title', 'my-title');

// 将元素添加到 DOM
const box = document.getElementById('box');

box?.appendChild(el);

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

我们可以通过在其样式对象上设置属性来设置元素的样式。

const el = document.createElement('div');

el.innerHTML = `
  <span>
    Hello world
  </span>
`;

el.style.backgroundColor = 'salmon';
el.style.color = 'white';

// 将元素添加到 DOM
const box = document.getElementById('box');

box?.appendChild(el);

注意 ，使用 style 对象时，多词属性是驼峰式大小写的。

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

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

注意 ，我们在访问 appendChild 方法之前使用了可选链接 (?.) 运算符。

如果引用为空（null 或 undefined），则可选链接 (?.) 运算符会短路。

换句话说，如果 box 变量存储了一个 null 值，我们不会尝试在 null 上调用 appendChild 方法并获得运行时错误。

box 变量可能为 null，因为如果 document.getElementById() 方法没有找到具有提供的 id 的元素，它会返回 null。

查看笔记

扫码一下
查看教程更方便