javascript - 如何使用 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

score 1 · Accepted Answer

您的代码存在一些问题。

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

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

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

要添加文本“about javascript”，我们将编写：`h3Add.innerText +=“about javascript”

score 0 · Accepted Answer

尝试这个

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>

2 回答 2