Question

我正在尝试使用jquery将多行HTML代码附加到div，但它一直给我错误“Unexpected token ILLEGAL”

这是我试图追加的一行：

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

尝试使用此技巧'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 2

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

Ids

Answer 3

最好将静态HTML放在实际的HTML中，然后克隆内容以附加它：

＆＃13;

$('.irbiswindow').append( $("#tableToClone").clone() );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="irbiswindow">
            
</div>

<div style="display:none">
  <table id="tableToClone" 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>
</div>

＆＃13;

Answer 4

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

使用“ +”连接HTML代码段。
使用“ \”转义。
使用“`”（反-，grave accent），不需要任何额外的操作。 ES2015 / ES6（Template literals）支持此方法。
添加一个隐藏的tag，其中包含您需要的相同HTML代码，例如<p id="foo" style="display:none;">，然后使用.append($('#foo').html());。

现在将一些使用场景发布到上面提到的first three methods（只需在Chrome浏览器的控制台中运行它们）：

我们可以清楚地看到它们之间的差异。

不能用jquery追加多行html

4 个答案: