javascript - 附加HTML块jQuery

您好，我目前正在尝试向页面上的类添加HTML块，但是，每当我使用以下代码时，它似乎都破坏了整个脚本，而在控制台中没有任何错误：

$('.colon1').append("<div id='new-model-slider' class='owl-carousel owl-theme'>
<div class='item'><img src='/media/wysiwyg/porto/cmspages/ssangyong/tivoli/7-SsangYong_Tivoli.jpg' alt='SsangYong Tivoli Red'></div>
<div class='item'><img src='/media/wysiwyg/porto/cmspages/ssangyong/tivoli/12-SsangYong_Tivoli_seating.jpg' alt='Tivoli Seating'></div>
</div>");

我知道在添加HTML时这是不好的做法，但是由于特定原因我无法使用AJAX。

知道为什么这个JS可能不会追加到我的课程中吗？

谢谢

最佳答案

在javascript中，如果不使用+或使用\将它们连接起来，就无法断行

因此，这里有一些有关如何实现的示例：

// Example 1
$('.colon1').append("<div id='new-model-slider' class='owl-carousel owl-theme'>\
<div class='item'><img src='/media/wysiwyg/porto/cmspages/ssangyong/tivoli/7-SsangYong_Tivoli.jpg' alt='SsangYong Tivoli Red'>\</div>\
<div class='item'><img src='/media/wysiwyg/porto/cmspages/ssangyong/tivoli/12-SsangYong_Tivoli_seating.jpg' alt='Tivoli Seating'></div>\
</div>");

// Example 2
var string = "";
string += "<div id='new-model-slider' class='owl-carousel owl-theme'>";
string += "<div class='item'>";
string += "<img src='/media/wysiwyg/porto/cmspages/ssangyong/tivoli/7-SsangYong_Tivoli.jpg' alt='SsangYong Tivoli Red'></div>";
$('.colon1').append(string);

//Example 3
$('.colon1').append("<div id='new-model-slider' class='owl-carousel owl-theme'><div class='item'><img rc='/media/wysiwyg/porto/cmspages/ssangyong/tivoli/7-SsangYong_Tivoli.jpg' alt='SsangYong Tivoli Red'></div><div class='item'><img src='/media/wysiwyg/porto/cmspages/ssangyong/tivoli/12-SsangYong_Tivoli_seating.jpg' alt='Tivoli Seating'></div></div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="colon1"></div>

关于javascript - 附加HTML块jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34678098/