如何使用 JavaScript DOM 向网页上的 HTML 元素添加文本

Question

我需要仅使用 JavaScript 向网页上的元素添加文本（刚开始在我的 JS class 中学习 DOM）。它是一个 h3 元素，带有 HTML 代码：

<h3>List of things we need to learn</h3>

当我仅使用 JavaScript 加载页面时，我需要将其更改为“关于 JavaScript 我们需要了解的事情列表”。我尝试了几种不同的方法，其中 none 似乎有效。其中一个例子是：

var h3Add = document.getElementsByTagName('h3');
document.h3Add.insertAdjacentHTML("beforeend", ' about JavaScript');

我使用了上面的代码以及许多其他代码，但感到非常沮丧。我想我可以通过删除当前的 h3 元素并创建一个新的 h3 元素来解决这个问题，但我宁愿做一些更直接的事情。

蒂亚

Answer 1

试试这个

function myFunction() {
  var h3 = document.getElementsByTagName('h3');
  h3[0].innerText = "List of things we need to learn"
  }

<body onload="myFunction()">
  <h3>Some Text</h3>
</body>

Answer 2

您的代码存在一些问题。

document.getElementsByTagName() returns 一个 htmlCollection 对象，而不是 DOM 元素。一个 htmlCollection 可以像数组一样寻址，所以如果你的 h3 是页面上的第一个 h3，你应该写：

var h3Add = document.getElementsByTagName('h3')[0];

要访问 h3 的内容，您应该使用 .innerText 字段，它就像一个字符串。

要添加文本“about javascript”，我们会这样写： `h3Add.innerText += " 关于 javascript"

How to add text to HTML element on web page using JavaScript DOM