如何使用Javascript更改html标记

How to change an html tag with Javascript?

本文关键字：html 标记 更改 Javascript 何使用      更新时间：2023-09-26

我想将字符串中的文本显示到HTML标记中，而不需要移动到下一页并显示它。

<body>
<div>
    <label id="lbl1">Label </label>
    <button id="btn1" onclick="display()">Click </button>
    <script>
    function display() {
        var str="Hello World";
        document.write(str);
    }
</script>
</div>
</body>

如何编辑标签标签的内容？

普通…

document.getElementById('lbl1').innerHTML = str;

function display() {
    var str="Hello World";
    var label = document.getElementById('lbl1');
    label.innerHTML = str;
 }

<body>
<div>
    <label id="lbl1">Label </label>
    <button id="btn1" onclick="display()">Click </button>
    <script>
    function display() {
        var str="Hello World";
        var label = document.getElementById("lbl1");
        label.innerText = str;
    }
</script>
</div>
</body>

当您单击按钮时，函数display（）将运行，标签标签的文本将更改为"Hello World"。

使用document.getElementById("lbl1").innerHTML = display();并在函数中添加一条返回语句：

function display() 
{
   var str="Hello World";
   return str;
}

以类似的方式编辑内容：document.getElementById("lbl1").innerHTML = "New content...";。

您也可以稍微修改display()函数以获得所需的结果：

function display() 
{
   var str="Hello World";
   var label = document.getElementById("lbl1");
   label.innerHTML = str;
}

另一种方式：

window.onload = function()
{
  var button = document.getElementById("btn1");
  button.onclick = function()
  {
    document.getElementById("lbl1").innerHTML = "Hello World";
  }
}

最后一种方式是最理想的，最好将JavaScript代码放入另一个文件中，并通过script元素的src属性附加它。

让我们提供一个完整的例子：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <label id="lbl1">Label </label>
    <button id="btn1">Click </button>
  </body>
</html>

然后在JavaScript文件中，您只需注册各种事件：

//JavaScript
window.onload = function() //You have to ensure that everything has loaded
{
  var button = document.getElementById("btn1");
  button.onclick = function()
  {
    document.getElementById("lbl1").innerHTML = "Hello World";
  }
}

它通常被认为是在单独的JavaScript文件中注册事件的最佳方式，因为它提高了性能和维护的简单性。你可以在这里阅读更多关于它的信息。

相关文章：