Question

我在.js文件中使用HTML，并且当HTML具有这样的新行时，它会显示错误

λ java -jar flyway-commandline-xxx.jar
no main manifest attribute, in flyway-commandline-xxx.jar

上面的代码将显示错误，并且将不起作用。但是如果我用这种方式使用相同的代码：

$(".message").click(function() {
    document.getElementById("timeline").innerHTML = ' <div>
    <p>Hello John</p>
    <ul>
        <li>Point A</li>
        <li>Point B</li>
        <li>Point C</li>
        <li>Point D</li>
    </ul>
</div>';
});

有什么方法可以使第一个代码在js文件中工作？

提前谢谢。

Answer 1

使用此：

$(".message").click(function() {
document.getElementById("timeline").innerHTML = ` <div>
<p>Hello John</p>
<ul>
    <li>Point A</li>
    <li>Point B</li>
    <li>Point C</li>
    <li>Point D</li>
</ul>
</div>`;});

请继续倾斜ES6。如果要使用“”，则必须串联。

Answer 2

您需要对多行文本使用反引号，以使其处于同一串联范围内。

使用背景

$(".message").click(function() {
    document.getElementById("timeline").innerHTML = `<div>
    <p>Hello John</p>
    <ul>
        <li>Point A</li>
        <li>Point B</li>
        <li>Point C</li>
        <li>Point D</li>
    </ul>
</div>`;
});
$(".message").click(function() {
document.getElementById("timeline").innerHTML = '<div><p>Hello John</p><ul><li>Point A</li><li>Point B</li><li>Point C</li><li>Point D</li></ul></div>';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='timeline'></div>
<button class='message'>Click</button>

但是，您可以对每行使用+串联，例如：

使用单独连接

$(".message").click(function() {
    document.getElementById("timeline").innerHTML = '<div>'+
    '<p>Hello John</p>'+
    '<ul>'+
        '<li>Point A</li>'+
        '<li>Point B</li>'+
        '<li>Point C</li>'+
        '<li>Point D</li>'+
    '</ul>'+
'</div>'
});
$(".message").click(function() {
document.getElementById("timeline").innerHTML = '<div><p>Hello John</p><ul><li>Point A</li><li>Point B</li><li>Point C</li><li>Point D</li></ul></div>';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='timeline'></div>
<button class='message'>Click</button>

在js中使用html显示错误

2 个答案: