迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 编程语言 >

如何使用 TypeScript 创建 HTML 元素

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

在 TypeScript 中创建 HTML 元素:

  1. 使用 document.createElement() 方法创建元素。
  2. 在创建的元素上设置任何属性或内部 html。
  3. 使用 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);

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

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

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

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

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

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

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

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便