如何使用 TypeScript 创建 HTML 元素

在 TypeScript 中创建 HTML 元素:

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

以下是本文示例的 HTML。

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 字符串,因为反引号允许我们轻松创建多行字符串。

如果需要在元素上设置属性,请使用 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);

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

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

如果引用为空(空或未定义),则可选的链接 (?.) 运算符会短路。

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