不能用jquery追加多行html

Question

我试图使用jquery将多行HTML代码附加到div，但它一直给我错误“意外令牌非法”。

下面是我想要附加的一行：

$('.irbiswindow').append('<table class="ts"><tr><th class="ts-yw4l" rowspan="3"><img src="img/previews/3_1_1.jpg" class="previewing">
                                        <img src="img/previews/3_1_2.jpg" class="previewing"><img src="img/previews/3_1_3.jpg" class="previewing"><img src="img/previews/3_1_4.jpg" class="previewing"><img src="img/previews/3_1_5.jpg" class="previewing"></th>
                                        <th class="ts-yw4l"><p class="comment">Rare and gorgeous "irbis" snow leopards observe the surroundings ready to hunt.</p><p class="comment">3Ds Max, Photoshop, Vray, Zbrush</p></th></tr><tr><td class="ts-yw4l"></td></tr><tr>
                                        <td class="ts-yw4l"></td></tr></table>');

Answer 1

默认情况下，包含换行符的HTML代码不能直接与append/prepend一起使用.但幸运的是，目前有以下有效的方法：

1. 使用"+“连接HTML代码段。
2. 用"\“来逃跑。
3. 使用"`“(反勾，严肃口音)，不需要任何额外的操作。该方法得到is 2015/ES6 (模板文字)的支持。
4. 添加一个隐藏的tag，其中包含您需要的相同的HTML代码，例如<p id="foo" style="display:none;">，然后使用.append($('#foo').html());。 现在，将一些使用场景发布到上面讨论的first three methods中(只需在Chrome浏览器的控制台中运行它们)：

​

我们可以清楚地看到他们的分歧。

Answer 2

尝试使用此技巧'text'+ newline 'text'进行多行连接

$('.irbiswindow').append('<table class="ts"><tr><th class="ts-yw4l" rowspan="3"><img src="img/previews/3_1_1.jpg" class="previewing">' +
    '<img src="img/previews/3_1_2.jpg" class="previewing"><img src="img/previews/3_1_3.jpg" class="previewing"><img src="img/previews/3_1_4.jpg" class="previewing"><img src="img/previews/3_1_5.jpg" class="previewing"></th>' +
    '<th class="ts-yw4l"><p class="comment">Rare and gorgeous "irbis" snow leopards observe the surroundings ready to hunt.</p><p class="comment">3Ds Max, Photoshop, Vray, Zbrush</p></th></tr><tr><td class="ts-yw4l"></td></tr><tr>' +
    '<td class="ts-yw4l"></td></tr></table>');

Answer 3

您可以将html存储在这样的js变量中：

var html;
html += '<table class="ts">';
html += '    <tr>';
html += '      <td>';
...
html += '      </td>';
html += '    </tr>';
html += '</table>';

$('.screencontainer').delay(0).animate({height:"2560px",width:"1000px"},0, function(){$('.irbiswindow').append(html)});