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

Question

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

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

当我仅使用 JavaScript 加载页面时，我需要将其更改为“我们需要了解的 JavaScript 内容列表”。 我尝试了几种不同的方法，但似乎都不起作用。 其中一个例子是：

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

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

TYIA

Answer 1

您的代码存在一些问题。

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

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

要访问 h3 的内容，您应该使用.innerText字段，它的作用类似于字符串。

要添加文本“about javascript”，我们可以这样写：`h3Add.innerText += “about javascript”

Answer 2

尝试这个

 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>