使用javascript在div中插入元素引导程序

Question

我想使用javascript插入html标记，但由于引号的原因，它不起作用。

.text仅在变量中工作，但innerHTML不工作。

$("#year_title").text(response[0]['year_title']);
document.getElementById('progress').innerHTML = '<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>';

Answer 1

这两个换行符似乎是问题所在：

document.getElementById('progress').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Hello</div></div>';

<div id="progress">
</div>

Answer 2

实际上，问题是不能在多行上跨越单引号('(或双引号("(字符串。你可以通过4种方式克服这个问题：

1. 使用单引号('(或双引号("(在单行中创建字符串

document.getElementById('progress').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Hello World</div></div>';

<div id="progress">
</div>

2. 使用串联(+(运算符连接多个字符串：

document.getElementById('progress').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">'+
'Hello World'+
'</div>'+
'</div>';

<div id="progress">
</div>

3. 使用反斜杠((转义换行符，使单('(或双("(引号字符串跨多行

document.getElementById('progress').innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
Hello World
</div>
</div>';

<div id="progress">
</div>

4. 使用带有倒勾号(`(的ES6样式的多行字符串：

查看此片段：

document.getElementById('progress').innerHTML = `<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Hello World
</div>
</div>`;

<div id="progress">
</div>