Append HTML Блок JQuery

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..."; 

ИЛИ

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

Эта информация поможет вам разобраться. https://davidwalsh.name/multiline-javascript-strings