如何使用javascript中的新行創建html

Question

的PHP-這工作：

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

javascript-不起作用：

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

javascript-這有效：

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

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

如何使第二個示例有效？ 我在Windows上，記事本++。

謝謝。

Answer 1

對於多行，您應該使用單個反引號`（在1之前按Shift +按鈕）

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

Answer 2

通過添加反斜杠（\\）作為行中的最后一個字符，您甚至都不能在其后有空格鍵，因為那樣一來它就不會取消換行符。

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

Answer 3

ECMAScript 6（ES6）引入了一種新型的文字，即模板文字。 它們具有許多功能，其中包括變量插值，但對於這個問題最重要的是，它們可以是多行的。

模板文字由反引號分隔：

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

Answer 4

Javascript允許使用反引號在ES6中拆分字符串：

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

Answer 5

您正在使用多行字符串，這就是為什么它不起作用的原因，我猜想使用模板文字

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