使用 JavaScript 更改标签元素的文本

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 更改标签元素的文本

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

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

以下是本文示例的 HTML。

index.html

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

    <style>
      .bg-salmon {
        background-color: salmon;
      }
    </style>
  </head>

  <body>
    <div>
      <label id="label" for="first_name"
        >What's your <span class="bg-salmon">first</span> name?</label
      >
      <input type="text" name="first_name" id="first_name" />
    </div>

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

下面是JavaScript代码

index.js

const label = document.getElementById('label');

// ✅ Change (replace) the text of the label
label.textContent = 'Replacement label text';

// ✅ Change (replace) the content with HTML
label.innerHTML = `<span style="background-color: lime">Replacement label HTML</span>`;

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

// ✅ Append / Prepend HTML to the label
label.insertAdjacentHTML(
  'beforeend',
  `<span style="background-color: lime"> appended HTML</code>`,
);

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

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

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

如果需要完全替换标签的 HTML 内容，请使用 innerHTML 属性。

const label = document.getElementById('label');

label.innerHTML = `<span style="background-color: lime">Replacement label HTML</span>`;

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

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

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

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

const label = document.getElementById('label');

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

insertAdjacentText 方法采用以下 2 个参数：

position - 相对于应插入文本的元素的位置。可以是以下4种之一：

beforebegin - 在元素本身之前。
afterbegin - 就在元素内部，在第一个子元素之前。
beforeend - 就在元素内部，在最后一个子元素之后。
afterend - 在元素本身之后。

data - 用于创建要插入到给定位置的新文本节点的字符串。

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

如果需要向标签中插入 HTML，请使用 insertAdjacentHTML 方法。

const label = document.getElementById('label');

label.insertAdjacentHTML(
  'beforeend',
  `<span style="background-color: lime"> appended HTML</code>`,
);

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

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