使用 JavaScript 更改 Div 元素的文本

Change the Text of a Div Element using JavaScript

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

以下是本文示例的 HTML。

索引.html


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

  <body>
    <div id="container">Initial Text</div>

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

这是相关的 JavaScript 代码。

索引.js


const div = document.getElementById('container');

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

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

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

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

更改 div 元素的文本

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

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

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

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

索引.js


const div = document.getElementById('container');

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

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

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

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

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

索引.js


const div = document.getElementById('container');

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

insertAdjacentText

方法采用以下 2 个参数：

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

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

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

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

如果您需要将 HTML 插入到中div，请使用
insertAdjacentHTML
方法。

索引.js


const div = document.getElementById('container');

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

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

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

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

–