元素 UI 加载更改文本 - JavaScript

在 Web 开发中，经常需要动态地更改 UI 元素的内容和样式。本文将介绍如何使用 JavaScript 改变 HTML 元素的文本内容，并在加载时进行相应操作。

设置元素内容

要在 JavaScript 中更改元素的文本内容，我们可以使用 innerHTML 属性。该属性用于设置或返回 HTML 元素的内容，语法如下：

element.innerHTML = newContent;

其中，element 为需要修改的 HTML 元素，newContent 为将要替换的新内容。例如，以下代码将在加载时将 ID 为 demo 的元素的内容更改为 "Hello World!"：

<div id="demo">原始文本</div>
<script>
  document.getElementById("demo").innerHTML = "Hello World!";
</script>

在浏览器中运行该代码，即可看到 demo 元素的内容已经被更改为 "Hello World!"。

加载时进行操作

如果要在页面加载时对元素进行更改，可以使用 window.onload 事件。该事件将在页面完全加载后触发，可以确保 DOM 已经被加载完毕。例如，以下代码将在页面加载时将 ID 为 demo 的元素的内容更改为 "Hello World!"：

<div id="demo">原始文本</div>
<script>
  window.onload = function() {
    document.getElementById("demo").innerHTML = "Hello World!";
  }
</script>

在浏览器中运行该代码，即可看到 demo 元素的内容已经被更改为 "Hello World!"。

小结

JavaScript 提供了方便的方法来更改 HTML 元素的内容。可以使用 innerHTML 属性对元素进行更改，也可以使用 window.onload 事件来确保在页面加载时进行操作。在实际开发中，我们可以结合这些技术来实现更丰富、更动态的 Web 页面。