Question

您好，我目前正在努力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可能不会附加到我的课堂内？

感谢

Answer 1

在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>

Answer 2

请执行以下操作

var appendstring = ""; 

appendstring+="<div id='new-model-slider' class='owl-carousel owl-theme'>"; 
appendstring+="<div class='item'>"; 
appendstring+="<img src='/media/wysiwyg/porto/cmspages/ssangyong/tivoli/7-SsangYong_Tivoli.jpg' alt='SsangYong Tivoli Red'></div>"; 

//and so on ... for the rest of the string (line by line) 

$('.colon1').append(appendstring); 

Answer 3

您的代码更改为以下，除去换行，并使用单引号引用您的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>'); 

Answer 4

您可以分割在多个行字符串下面的例子：

var multiStr = "This is the first line" + 
"This is the second line" + 
"This is more..."; 

OR

var multiStr = "This is the first line \ 
This is the second line \ 
This is more..."; 

此信息将帮助您理解。 https://davidwalsh.name/multiline-javascript-strings