innerHTML 执行多行

Posted 2023-05-07

【中文标题】innerHTML 执行多行

【英文标题】：innerHTML to execute multiple lines

【发布时间】：2015-07-20 20:02:59

【问题描述】：

我在我的 html 文件的脚本部分中使用了 innerHTML。

    document.getElementById("id1").innerHTML="<font size=4 color=blue><b>Process</b></font><br>"

如果它适合单行，它工作得很好， 但是我想在innerHTML中放置多行HTML代码，可以吗？

    document.getElementById("demo").innerHTML = "

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    CPU Information
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    No of Cores:
    1
    Speed of each core in Mhz:
    cpu MHz     : 2399.318
    model name  : Intel(R) Xeon(R) CPU           E5645  @ 2.40GHz
    CPU Load:
    0.1
    Top CPU using process/application
    -------------------------------------
    PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND           
    1 root      15   0 10364  680  576 S  0.0  0.0   0:05.46 init               
    ";

【参考方案1】：

使用 `（反引号）代替 ' 或 "，就可以了。

document.getElementById("demo").innerHTML = `

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CPU Information
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
No of Cores:
1
Speed of each core in Mhz:
cpu MHz     : 2399.318
model name  : Intel(R) Xeon(R) CPU           E5645  @ 2.40GHz
CPU Load:
0.1
Top CPU using process/application
-------------------------------------
PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND           
1 root      15   0 10364  680  576 S  0.0  0.0   0:05.46 init               
`;

【讨论】：

这是最好的答案！谢谢

【参考方案2】：

最健壮的方法是使用字符串连接：

document.getElementById("id1").innerHTML = 
    "<font size=4 color=blue>" +
    "<b>Process</b>" +
    "</font>" +
    "<br>";

虽然你可以通过续行来做到这一点：

document.getElementById("id1").innerHTML = 
    "<font size=4 color=blue>\
<b>Process</b>\
</font>\
<br>";

请注意，后续行中的前导空格是字符串的一部分。

---

总而言之：如果您经常这样做，您可能会考虑使用模板引擎或类似引擎，这样您的 HTML 就不会与 javascript 混合。

【讨论】：

我放置在innerHTML 中的HTML 部分本质上是动态的，这是由一些脚本添加到这里的。所以，这种方式不适合先生。

@RaviKishore：动态与什么有什么关系？您仍然会使用字符串连接（或模板引擎）。如果您遇到的情况与您的问题不同，那么请尊重一下，为什么不让您的问题准确反映您正在尝试做的事情呢？

这个案例你能做吗：document.getElementById("demo").innerHTML = "============ ==================================================== =======健康检查报告（CPU-内存-磁盘-进程）=============================================== ========================"; IP 地址： 10.2.3.4主机名： H1 内核版本： 2.6.18-308.4 .1.el5 正常运行时间： 52 天

@RaviKishore：cmets 中的代码不可读。如果您想改进问题，请使用问题上的“编辑”链接。