为什么将值返回给innerHTML时函数内部的innerHTML会被忽略？答案

【问题标题】：Why does innerHTML inside a function get ignored when returning a value to innerHTML?为什么将值返回给innerHTML时函数内部的innerHTML会被忽略？
【发布时间】：2013-10-26 09:07:20
【问题描述】：

我正在调用一个打印到 div 的函数，然后返回一个也打印到 div 的字符串。以下只会打印“二”，但我希望它先打印“一”，然后是“二”：

<body>
     <div id="view"></div>
</body>
<script>
global_cdiv = "view"
function test1(){
    document.getElementById(global_cdiv).innerHTML += "one" + "<br>";
    return "two";
}
document.getElementById(global_cdiv).innerHTML += test1();

</script>

调试中没有错误或任何显示。为什么Javascript会忽略函数内部的innerHTML？（解决方法是将 test1() 中的值存储到变量中然后打印它，但是为什么不能直接使用 test1 呢？）

【问题讨论】：

至少你可以把你的<script>放在<body>里面，或者放在onload里面<head>。

标签： javascript html

【解决方案1】：

document.getElementById(global_cdiv).innerHTML += test1();

是

的简写形式

document.getElementById(global_cdiv).innerHTML = document.getElementById(global_cdiv).innerHTML + test1();

在评估test1() 之前，评估innerHTML 值，该值是空的，并且与test1() 的结果（two）连接。所以，实际的表达方式变成了这样

document.getElementById(global_cdiv).innerHTML = "" + "two";

这会覆盖test1() 中的任何设置。这就是为什么你只看到two。

要了解它确实会覆盖它，请像这样更改您的test1()

function test1(){
    document.getElementById(global_cdiv).innerHTML += "one" + "<br>";
    console.log(document.getElementById(global_cdiv).innerHTML);
    return "two";
}

它将打印one<br>

【讨论】：

我不敢相信我错过了！ ty 指出我的错误

【解决方案2】：

当您调用document.getElementById(global_cdiv).innerHTML += test1() 时，这是执行顺序：
1- 评估 document.getElementById(global_cdiv).innerHTML 并将其保存到临时变量中
2-执行test1函数
3- 将临时变量附加到 test1 函数的返回值
4-将结果分配给document.getElementById(global_cdiv).innerHTML

所以这大致就是你正在做的事情：

var temp = document.getElementById(global_cdiv).innerHTML
document.getElementById(global_cdiv).innerHTML = "one"  // inside your function
document.getElementById(global_cdiv).innerHTML = temp + "two"

第二个innerHTML（在您的情况下位于您的函数内部）分配被第三个（未附加到“两个”）覆盖

【讨论】：

在 += 语句之后在 test1() 内添加 console.log(document.getElementById(global_cdiv).innerHTML)。

【解决方案3】：

<body>
     <div id="view"></div>
</body>
<script>
global_cdiv = "view";
    var temp = ""; 
function test1(){
   temp = "one" + "<br>";
    return temp + "two";
}
document.getElementById(global_cdiv).innerHTML = test1();

</script>

检查上面的代码。这将解决您的问题。

【讨论】：