1

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

$(".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>';
});

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

提前致谢。

4

2 回答 2

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。如果你想使用 '' 那么你必须连接。

于 2018-08-21T10:59:39.830 回答
0

您需要对多行文本使用反引号，使其处于相同连接的范围内。

使用反引号

$(".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>

于 2018-08-21T10:56:56.177 回答