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

Paoting

Answer 1

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

Mccullum

This is the best answer! Thanks – Longrange

Answer 2

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.

Naissant

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. – Paoting

@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? – Naissant

Could you please do for this case:<br/>document.getElementById("demo").innerHTML = "<font color=red>=====================================================================</font><br> <font size=5 color=blue><b>Health Check Report (CPU-Memory-Disk-Processes)</b></font><br> <font color=red>=====================================================================</font><br>"; <br> <b>IP Address:</b> 10.2.3.4<br> <br> <b>Hostname:</b> H1 <br> <b>Kernel Version:</b> 2.6.18-308.4.1.el5 <br> <b>Uptime:</b> 52 days <br> – Paoting

@RaviKishore: Code in comments is unreadable. If you want to improve the question, use the "edit" link on the question. – Naissant