使用 JavaScript 更改标签元素的文本
使用 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.jsconst 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 字符串。
请注意，此方法不应在用户提供的数据未被转义的情况下使用，因为它会使我们容易受到跨站点脚本攻击。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
