HTML 使用JavaScript修改标签文本

在本文中，我们将介绍如何使用JavaScript来修改HTML标签的文本内容。

阅读更多：HTML 教程

JavaScript内置函数innerHTML和innerText

在HTML中，标签的文本内容可以通过JavaScript来修改。常用的方法是使用innerHTML和innerText函数。

innerHTML

innerHTML函数可以修改一个元素中的HTML内容。使用innerHTML函数，我们可以直接将HTML标签文本作为字符串赋值给某个元素的innerHTML属性。

<p id="example">这是一个示例文本。</p>

<script>
    document.getElementById("example").innerHTML = "这是修改后的文本。";
</script>

在此例中，我们选择了一个带有id属性为”example”的

元素，并使用innerHTML函数将完整的HTML内容替换为指定的文本。

innerText

与innerHTML函数不同，innerText函数可以修改元素中的纯文本内容。它会自动将标签内的HTML代码转换成可读的文本。

<p id="example">这是一个示例文本。</p>

<script>
    document.getElementById("example").innerText = "这是修改后的文本。";
</script>

在本例中，innerText函数同样会替换带有id为”example”的

元素中的文本。不同的是，这里的文本不包含HTML标签。

使用innerHTML和innerText函数，我们可以轻松地修改HTML标签的文本内容。

使用JavaScript动态更新标签文本

在许多情况下，我们可能需要根据特定事件或用户输入来使用JavaScript动态更新标签的文本内容。下面是一些示例。

根据按钮点击更新文本

<p id="example">点击按钮以更新标签文本。</p>
<button onclick="updateText()">点击我</button>

<script>
    function updateText() {
        document.getElementById("example").innerText = "文本已更新！";
    }
</script>

在此示例中，我们创建了一个按钮，并使用onclick事件来触发updateText函数，该函数会将带有id为”example”的

元素的文本更新为”文本已更新！”。

根据用户输入更新文本

<p>请输入您的名字：</p>
<input type="text" id="nameInput" placeholder="请在此输入您的名字">
<button onclick="updateName()">更新名字</button>
<p id="result"></p>

<script>
    function updateName() {
        var name = document.getElementById("nameInput").value;
        document.getElementById("result").innerText = "您的名字是：" + name;
    }
</script>

在此例中，我们创建了一个文本输入框和一个按钮。当用户在输入框中输入名字并点击按钮时，updateName函数会获取输入框中的值，并将结果显示在带有id为”result”的

元素中。

通过这些示例，我们可以看到如何使用JavaScript根据特定事件或用户输入来动态更新HTML标签的文本内容。

总结

在本文中，我们介绍了使用JavaScript来修改HTML标签文本的方法。通过innerHTML和innerText函数，我们可以直接修改HTML内容或纯文本内容。我们还展示了一些示例，包括根据按钮点击或用户输入来动态更新标签文本。通过这些技巧，我们可以轻松地使用JavaScript在网页中修改标签文本，实现更具交互性的网页设计。