如何使用 Javascript 更改 html 标签？ [复制]答案

【问题标题】：How to change an html tag with Javascript? [duplicate]如何使用 Javascript 更改 html 标签？ [复制]
【发布时间】：2013-08-30 21:56:36
【问题描述】：

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

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

【问题讨论】：

如果只是文字，可以用var target = document.getElementById("lbl1"); while (target.firstChild) { target.removeChild(target.firstChild); } target.appendChild(document.createTextNode(str));覆盖标签的内容

标签： javascript html

【解决方案1】：

常见的……

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

【讨论】：

谢谢...我正在尝试这种方式.. document.getElementById(lbl1).text=str
cmets 中的@Ian 方法如果只需要文本是最好的。见Security Considerations of element.innerHTML

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用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 代码放在另一个文件中，并通过 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 文件中注册事件的最佳方式。你可以阅读更多关于它的信息here。

【讨论】：