js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】

当网页中所有的元素都被加载之后，我们可以使用JS中的文档就绪函数来动态改变页面内容。其中，innerHTML和innerText是两个用于改变元素内容的函数。下面详细介绍如何使用这两个函数实现动态改变页面内容的效果。

1. 文档就绪函数

JavaScript提供了两种文档就绪函数:

• window.onload: 当整个页面（包括图片、样式文件等）都加载完毕之后，该事件触发。
• DOMContentLoaded事件：该事件只有在DOM树加载完成之后就会触发。这意味着并不需要等待样式表、图像和子框架的完成加载。

下面是一个例子，当窗口加载完毕时，会在页面中查找一个ID为"myDiv"的元素，并将其innerHTML更改为"I am dynamic text!"。

window.onload = function() {
  document.getElementById("myDiv").innerHTML = "I am dynamic text!";
};

2. innerHTML

innerHTML允许将HTML标记插入到元素的文本中。例如，如果要在页面上插入一个段落元素，可以使用以下代码：

window.onload = function() {
  var p = document.createElement("p");
  p.innerHTML = "This is a dynamic paragraph.";
  document.body.appendChild(p);
};

在上面的代码中，我们创建了一个新元素(段落)，然后通过innerHTML将文本插入其中。最后，我们将该元素附加到文档的主体中。运行代码后，将会在页面上显示出一个新段落。

3. innerText

与innerHTML不同，innerText只显示文本内容，不会解释HTML标签。例如，如果要改变页面上一个元素的文本，可以使用以下代码：

window.onload = function() {
  document.getElementById("myDiv").innerText = "This is new text!";
};

在上述代码中，我们使用getElementById找到页面上ID为"myDiv"的元素，并使用innerText函数向其中插入新的文本。

综上所述，我们可以利用文档就绪函数和innerHTML、innerText函数来实现对页面内容的动态改变。