Javascript 将HTML添加到JQuery添加项/插入项

我希望将html添加到此函数中，到目前为止，我有一个基本上由缩略图组成的网格，用作旋转木马或相应图像的控件：

<div class="row">
            <div class="col-lg-12 no-pad">
                <h2 class="centre text-uppercase no-margin title-padding white-bg">XXXXX &amp; Demos</h2>
                <div class="grid">
                    <ol id="vid-list" class="text-uppercase image-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="indicator-active">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX<br />Commercial</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="1">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="2">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXX<br />XXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="3">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXX<br />XXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="4">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="5">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="6">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX</h4>
                            </div>
                        </li>
                        <li data-target="#myCarousel" data-slide-to="7">
                            <div class="grid-item">
                                <img src="img/btn.png">
                                <h4>XXXXXX</h4>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
</div>

XXXXX&；演示

XXXXXX
商业


XXXXX


XXXXX
XXXXX


XXXXX
XXXXX


XXXXXX


XXXXXX


XXXXXX


XXXXXX

及

$（'.button'）。在（'click'，function（）上）{
var$items='

柠檬树短片


柠檬树短片


柠檬树短片


柠檬树短片
'；
$grid.同位素（'insert'，$items）；
}

---

但是，第二行出现语法错误？

字符串不能像这样简单地跨越多行

为了实现这一点，您可以在每行末尾添加反斜杠（），以转义换行符。但这种方法存在的问题是，如果您在斜杠后有额外的空格，它将失败，但这种情况可能很难发现

我的首选方法是关闭字符串，并使用加号将其与下一行的字符串连在一起。如下所示：

'String on line 1'+
'String on line 2'+
'etc...'

尝试此代码（未测试，但应接近右侧）：

函数makeDataSlide（slideId、imgSrc、slideTitle）{
var slide=$（“
”）；
var gridItem=$（''）；
$（gridItem）.append（“”）；
$（gridItem）.append（“”+slideTitle+“”）；
$（幻灯片）。追加（gridItem）；
回程滑道；
}
$（'.button'）。在（'单击'，函数（）上）{
变量$items=[
makeDataSlide（8，“img/btn.png”，“柠檬树短片”），
makeDataSlide（9，“img/btn.png”，“柠檬树短片”），
makeDataSlide（10，'img/btn.png'，'lemon tree短片'），
makeDataSlide（11，'img/btn.png'，'The lemon tree short film'），
]
$grid.同位素（'insert'，$items）；
});

---

如果您继续遇到问题，请考虑接受以前的对多行字符串的回答，并打开一个新的问题，因为我们已经远远偏离了这个问题的原始范围。

这是一个多行字符串的问题。请参照这一点，但它仍然在最后一行产生错误：“unthySythOrthRetry:Engess”。在参数列表之后”。你能把更新后的代码理想地发布到JSFIDLE吗？不管是JSFIDLE，我都能看到你缺少的“'）”。最后一行应该是：}）；我做了所有这些，但它仍然没有做任何事情。你可能想查看同位素的文档。快速查看insert方法文档（）可以发现它需要的是DOM或jQuery对象，而不是字符串。

'String on line 1'+
'String on line 2'+
'etc...'

function makeDataSlide(slideId, imgSrc, slideTitle) {
  var slide = $('<li data-target="#myCarousel" data-slide-to="'+ slideId +'"></li>');
  var gridItem = $('<div class="grid-item" style="display:none"></div>');
  $(gridItem).append('<img src="'+ imgSrc +'">');
  $(gridItem).append('<h4>'+ slideTitle +'</h4>');
  $(slide).append(gridItem);
  return slide;
}

$('.button').on( 'click', function() {
    var $items = [
      makeDataSlide(8, 'img/btn.png', 'The lemon tree-short film'),
      makeDataSlide(9, 'img/btn.png', 'The lemon tree-short film'),
      makeDataSlide(10, 'img/btn.png', 'The lemon tree-short film'),
      makeDataSlide(11, 'img/btn.png', 'The lemon tree-short film'),
    ]
    $grid.isotope( 'insert', $items);
});