innerHTML to execute multiple lines

Question

Iam using innerHTML in script part of my HTML file.

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

If it fites in single line ,it is working great, but I want to place multiple lines of HTML code in innerHTML , Is it possible ?

    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               
    ";

score 21 · Answer 1 · answered May 08 '18 at 07:50

Use ` (backtick) instead of ' or ", it will do the job.

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               
`;

This is the best answer! Thanks – jjsantoso Oct 10 '18 at 15:02 — jjsantoso, Oct 10 '18 at 15:02

score 8 · Answer 2 · answered May 10 '15 at 07:12

8

The most robust way is to use string concatenation:

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

Although you can do it with line continuations:

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

Note that leading whitespace on subsequent lines is part of the string.

All that said: If you're doing this a lot, you might consider using a templating engine or similar, so you don't have your HTML intermixed with your JavaScript.

answered May 10 '15 at 07:12

T.J. Crowder

1,031,962
187
1,923
1,875

Here the HTML part Iam placing in innerHTML is dynamic in nature, That is being added here by some scripting. So, this way wont suits sir. – Ravi Kishore May 10 '15 at 07:24
@RaviKishore: What does it being dynamic have to do with anything? You'd still use string concatenation (or a templating engine). If you have a situation **different** from your question, then due respect, why not make your question an accurate reflection of what you're trying to do? – T.J. Crowder May 10 '15 at 07:25
Could you please do for this case:
document.getElementById("demo").innerHTML = "=====================================================================
Health Check Report (CPU-Memory-Disk-Processes)
=====================================================================
";
IP Address: 10.2.3.4

Hostname: H1
Kernel Version: 2.6.18-308.4.1.el5
Uptime: 52 days
– Ravi Kishore May 10 '15 at 07:41
1

@RaviKishore: Code in comments is unreadable. If you want to improve the question, use the "edit" link on the question. – T.J. Crowder May 10 '15 at 07:53

innerHTML to execute multiple lines

2 Answers2