如何使用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));