使用 JavaScript 更改元素的文本

作者

使用 JavaScript 更改元素的文本

Change the Text of an Element using JavaScript

使用该textContent属性更改元素的文本，例如
element.textContent = 'New text'. 该textContent属性会将元素的文本设置为提供的字符串，替换任何现有内容。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Hello world</div>

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

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

// ✅ Change (replace) the text of the element
box.textContent = 'New text';

// ✅ Change (replace) the text with HTML
// box.innerHTML = `<span style="background-color: lime">Some more text</span>`;

// ✅ Append / Prepend text to the element
box.insertAdjacentText('beforeend', ' appended text');

// ✅ Append / Prepend HTML to the element
box.insertAdjacentHTML(
  'beforeend',
  `<span style="background-color: cyan"> My html here</span>`,
);

我们使用元素上的
textContent
属性来更改其文本内容。

该textContent属性还可用于读取元素及其后代的文本内容。

在一个元素上设置textContent，移除该元素的所有子元素，并将它们替换为具有提供的字符串的单个文本节点。

如果您需要将文本追加/添加到元素的现有内容，请改用该insertAdjacentText方法。

索引.js
const box = document.getElementById('box');

// ✅ Append / Prepend text to the element
box.insertAdjacentText('beforeend', ' appended text');

insertAdjacentText

方法采用以下 2 个参数：

  1. position– 相对于应插入文本的元素的位置。可以是以下4种之一：
  • beforebegin– 在元素本身之前。
  • afterbegin– 就在元素内部，在它的第一个孩子之前。
  • beforeend– 就在元素内部，在它的最后一个子元素之后。
  • afterend– 在元素本身之后。
  1. data– 用于创建新文本节点以插入到给定位置的字符串。

在示例中，我们将文本插入元素内部，在其最后一个子元素之前，但您可以position根据您的用例更改参数的值。

如果需要向元素插入 HTML，可以使用
insertAdjacentHTML
方法。

索引.js
const box = document.getElementById('box');

// ✅ Append / Prepend HTML to the element
box.insertAdjacentHTML(
  'beforeend',
  `<span style="background-color: cyan"> My html here</code>`,
);

该方法采用的第一个参数与– 应该插入 HTML 的位置insertAdjacentHTML相同
。insertAdjacentText

第二个参数是包含要插入的内容的 HTML 字符串。

请注意，此方法不应在用户提供的输入未被转义的情况下使用，因为它会使您容易受到跨站点脚本攻击。

如果需要完全替换元素的 HTML 内容，可以使用
innerHTML
属性。

索引.js
const box = document.getElementById('box');

// ✅ Change (replace) the text with HTML
box.innerHTML = `<span style="background-color: lime">Some more text</span>`;

该innerHTML属性获取或设置元素中包含的 HTML。

通过在元素上设置属性，您可以有效地替换元素中以前包含的 HTML。

在设置元素的 HTML 时，您不应该在不转义的情况下使用用户生成的数据，因为这会使您的应用程序容易受到 XSS 攻击。

–

发表评论