Append HTML Block jQuery

Question

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

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
– Nicholas Maddren, Commented Jan 8, 2016 at 13:22
In javascript you cannot break lines without concatenating them with a + or using \ — YaBCK
– 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
– Apolo, Commented Jan 8, 2016 at 13:25

YaBCK · Accepted Answer · 2016-01-08 13:30:52Z

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

Sooraj · Accepted Answer · 2016-01-08 13:25:51Z

3

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

answered Jan 8, 2016 at 13:25

Sooraj

10.7k12 gold badges68 silver badges103 bronze badges

Comments

Wesley Smith · Accepted Answer · 2016-01-08 13:26:04Z

0

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

answered Jan 8, 2016 at 13:26

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

Comments

Verde · Accepted Answer · 2016-01-08 13:32:36Z

0

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

answered Jan 8, 2016 at 13:32

Verde

731 silver badge6 bronze badges

Collectives™ on Stack Overflow

Append HTML Block jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related