使用 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 方法之前使用了可选链接 (?.) 运算符。

如果引用为空(nullundefined),则可选链接 (?.) 运算符会短路。

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

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

查看笔记

扫码一下
查看教程更方便