Question

我想将字符串中的文本显示为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>

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

Answer 1

共同......

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

Answer 2

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

Answer 3

使用document.getElementById("lbl1").innerHTML = display();并在函数内添加一个return语句：

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代码放在另一个文件中，并通过src元素的script属性附加它。

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

<!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文件中注册事件的最佳方式。您可以阅读更多相关信息here。

Answer 4

<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”。

如何用Javascript更改html标签？

4 个答案: