Hello I am currently trying to append a block of HTML to a class on my page however whenever I use the following code it seems to break my whole entire script without any errors in the console:

$('.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>");

I'm aware this is bad practice when it es to adding HTML however I am unable to use AJAX for a specific reason.

Any idea why this JS might not be appending within my class?

Thanks

Hello I am currently trying to append a block of HTML to a class on my page however whenever I use the following code it seems to break my whole entire script without any errors in the console:

$('.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>");

I'm aware this is bad practice when it es to adding HTML however I am unable to use AJAX for a specific reason.

Any idea why this JS might not be appending within my class?

Thanks

• javascript
• jquery

• 4 String cannot be splitted on multiple lines – Tushar Commented Jan 8, 2016 at 13:21
• It doesn't append to my page and I added a console.log script at the bottom to see if it worked after this script has ran and it did not. – Nicholas Maddren Commented Jan 8, 2016 at 13:22
• What breaks?... Is that the actual code you are using? – epascarello Commented Jan 8, 2016 at 13:23
• In javascript you cannot break lines without concatenating them with a + or using \ – YaBCK Commented Jan 8, 2016 at 13:23
• You should also make sure that there is at least one element with the class "colon1". jQuery won't tell you if your selector is wrong – Apolo Commented Jan 8, 2016 at 13:25

4 Answers 4

In javascript you cannot break lines without concatenating them with a + or using \

So here a few examples on how you can do it:

// 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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="colon1"></div>

Do the following

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);

Change your code to the below, removing the line breaks and using single quotes to quote your string of html (because that's more natural IMHO):

$('.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>');

You can split string on multiple lines, examples below:

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

This info will help you to understand. https://davidwalsh.name/multiline-javascript-strings