how to create html using new lines in javascript

Question

php - this works:

$html = "
    <div class='part partb4'>
    <img class='imgb4' src='imgdef/01.jpg' alt='img'>
    </div>";
echo $html;

javascript - doesn't work:

let html = "    
    <div class='part partb4'>
    <img class='imgb4' src='imgdef/01.jpg' alt='img'>
    </div>";
    $(html).insertBefore($('.part').eq(0));

javascript - this works:

let html = "<div class='part partb4'><img class='imgb4' src='imgdef/01.jpg' alt='img'></div>";

$(html).insertBefore($('.part').eq(0));

How to make the second example valid? I'm on windows, Notepad++.

Thanks.

in first js code one bracket is not close `$(html).insertBefore($('.part').eq(0);` — Maheer Ali, Jan 26 '19 at 18:16
You can't do multiline like that in javascript. You need to replace `""` with `\`\`` (called template literals) — kemicofa ghost, Jan 26 '19 at 18:20
what if you try something like let html = "
"; html += ""; html +="
"; $(html).insertBefore($('.part').eq(0)); I am not sure if it will work but you can give it a try — Raheel Khan, Jan 26 '19 at 18:21
Possible duplicate of [Creating multiline strings in JavaScript](https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) — Nathan Champion, Jan 26 '19 at 18:22

score 1 · Answer 1 · answered Jan 26 '19 at 18:24

1

For the multiline you should use a single backticks ` (shift + button before 1)

let html = `
  <div class='part partb4'>
<img class='imgb4' src='imgdef/01.jpg' alt='img'>
</div>
`;

answered Jan 26 '19 at 18:24

Raheel Khan

464
10
12

score 1 · Accepted Answer · answered Jan 26 '19 at 18:25

1

by adding a backslash ( \ ) as the last character in the line, you can't even have a space bar behind it, because then it won't cancel the line break.

let html = "    
<div class='part partb4'>\
<img class='imgb4' src='imgdef/01.jpg' alt='img'>\
</div>";
$(html).insertBefore($('.part').eq(0));

answered Jan 26 '19 at 18:25

Ekene Madunagu

323
1
3
7

yeah missed that out – Ekene Madunagu Jan 26 '19 at 18:33

score 0 · Answer 3 · answered Jan 26 '19 at 18:21

ECMAScript 6 (ES6) introduces a new type of literal, namely template literals. They have many features, variable interpolation among others, but most importantly for this question, they can be multiline.

A template literal is delimited by backticks:

var html = `
  <div class='part partb4'>
<img class='imgb4' src='imgdef/01.jpg' alt='img'>
</div>
`;

score 0 · Answer 4 · answered Jan 26 '19 at 18:21

0

Javascript allows strings to be split in ES6 using the backticks:

let html = `    
<div class='part partb4'>
<img class='imgb4' src='imgdef/01.jpg' alt='img'>
</div>`;
$(html).insertBefore($('.part').eq(0));

answered Jan 26 '19 at 18:21

Nathan Champion

1,291
1
14
23

score 0 · Answer 5 · answered Jan 26 '19 at 18:21

0

You are using multiline string thats why its not working I guess use template literals

let html = `    
    <div class='part partb4'>
    <img class='imgb4' src='imgdef/01.jpg' alt='img'>
    </div>`;
    $(html).insertBefore($('.part').eq(0));

answered Jan 26 '19 at 18:21

Maheer Ali

35,834
5
42
73

how to create html using new lines in javascript

5 Answers5