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

使用 JavaScript 更改 Label 元素的文本

Change the Text of a Label element using JavaScript

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

以下是本文示例的 HTML。

索引.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 代码。

索引.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
属性label来更改其文本内容。

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

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

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

索引.js


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

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

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

通过在元素上设置属性，您可以有效地替换以前包含在label.

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

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

索引.js


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 label，请使用
insertAdjacentHTML
方法。

索引.js


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

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

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

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

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

–