在JavaScript中，如何获取HTML元素的内容并修改它？

htmljavascript

在JavaScript中，你可以使用DOM（文档对象模型）来获取和修改HTML元素的内容。document.getElementById()是一个常用的方法，它可以根据元素的ID来获取对应的元素。获取到元素后，你可以使用innerHTML属性来读取或修改元素的内容。

以下是一个简单的示例，展示了如何使用JavaScript获取一个HTML段落元素的内容，并将其修改为新的文本：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取并修改HTML元素内容</title>
<script>
function modifyContent() {
    // 获取元素
    var element = document.getElementById("myElement");
    
    // 获取当前内容
    var currentContent = element.innerHTML;
    console.log("当前内容:", currentContent);
    
    // 修改内容
    element.innerHTML = "这是新的内容！";
}
</script>
</head>
<body>

<p id="myElement">这是一段初始内容。</p>
<button onclick="modifyContent()">修改内容</button>

</body>
</html>

尝试一下 »

在上面的示例中，我们创建了一个包含初始文本的段落元素和一个按钮。当按钮被点击时，会触发modifyContent()函数。这个函数首先使用document.getElementById()获取ID为"myElement"的段落元素，然后通过innerHTML属性读取当前内容，并输出到控制台。接着，它将innerHTML设置为新的文本，从而修改段落的内容。

上一篇：3个非常有趣的HTML5Canvas动画

下一篇：在JavaScript中，如何使用`console.log()`函数来在浏览器的控制台输出信息？