如何使用 TypeScript 创建 HTML 元素

使用 TypeScript 创建 HTML 元素

How to create an HTML element using TypeScript

在 TypeScript 中创建 HTML 元素：

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

以下是本文示例的 HTML。

索引.html


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

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

这是相关的 TypeScript 代码。

源代码/index.ts


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

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

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

// ✅ (Optionally) Set Attributes on Element
el.setAttribute('title', 'my-title');

// ✅ (Optionally) Set styles on Element
// el.style.backgroundColor = 'salmon';
// el.style.color = 'white';

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

box?.appendChild(el);

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

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

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

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

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

源代码/index.ts


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

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

// ✅ (Optionally) Set Attributes on Element
el.setAttribute('title', 'my-title');

// ✅ (Optionally) Set styles on Element
// el.style.backgroundColor = 'salmon';
// el.style.color = 'white';

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

box?.appendChild(el);

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

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

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

该setAttribute方法有两个参数：

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

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

源代码/index.ts


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

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

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

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

box?.appendChild(el);

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

style您可以通过在其对象上设置属性来在元素上设置样式。

源代码/index.ts


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

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

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

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

box?.appendChild(el);

style请注意，在使用对象时，多词属性是驼峰式的。

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

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

请注意，我们

在访问该方法之前使用了可选的链接 (?.)运算符。appendChild

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

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

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

–