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