如何使用 TypeScript 创建 HTML 元素

Python PHP Java Go TypeScript C++ Vba Node.js C语言 MATLAB

如何使用 TypeScript 创建 HTML 元素

作者：迹忆客最近更新：2022/11/23 浏览次数：

在 TypeScript 中创建 HTML 元素：

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

以下是本文示例的 HTML。

index.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');

// ✅ 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 的示例。

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。

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 对象的属性来设置元素的样式。

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);