What's wrong with my .html() syntax?

Question

When I type out the following code:

$('.whatever').html("LOL");

It works. But in the website I'm building I need to add more than just a string.

This is what I wish to add:

<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div>
<div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div>
<div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>

But nothing happens when I put the HTML code above into the html() function. I'm wondering what obvious mistake I'm doing in regards to the syntax. Appreciate it!

Probably need to escape quotes. Show us what exactly you entered — asprin, Dec 11 '12 at 13:55
Are you escaping the quotes? Those would break the .html function if you were doing .html(" — Jeff Watkins, Dec 11 '12 at 13:56
Please paste few more lines, showing how you have stored the above HTML string and how you are invoking the .html() function. — acpmasquerade, Dec 11 '12 at 15:06
Multiline string isn't that easier in javascript. Refer to this http://stackoverflow.com/questions/805107/how-to-create-multiline-strings to understand how to make it work for you. — acpmasquerade, Dec 11 '12 at 15:11

Stéphane Bruckert · Answer 1 · 2012-12-11T14:54:11.357

1

Try with single quotes $('.whatever').html('LOL');

http://jsfiddle.net/83DSu/1/

edited Dec 11 '12 at 14:54

answered Dec 11 '12 at 14:00

Stéphane Bruckert

21,706
14
92
130

score 1 · Accepted Answer · answered Dec 11 '12 at 14:52

$('.whatever').html('<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div><div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div><div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>')

The following code will allow you to replace the html contents of the div

or you just make a string

text= '<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div>'+'<div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div>'
$('.whatever').html(text)

score 0 · Answer 3 · answered Dec 11 '12 at 14:29

It can work perfectly if you escape correctly

Demo with three different options

var html1 ="<div class=\"pic\"><img class=\"left\" src=\"img/happy-man.jpg\"/ >" + 
           "</div><div class=\"pic\"><img class=\"happy\" src=\"img/happy-woman.jpg\"/ ></div>" +
           "<div class=\"pic\"><img class=\"right\" src=\"img/happy-celeb.jpg\"/ ></div>";

$('#whatever').html(html1);

var html2 = "<div class='pic'><img class='left' src='img/happy-man.jpg'/ ></div>" + 
            "<div class='pic'><img class='happy' src='img/happy-woman.jpg'/ ></div>" + 
            "<div class='pic'><img class='right' src='img/happy-celeb.jpg'/ ></div>";

$('#whatever2').html(html2);

var html3 = '<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div>' +
            '<div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div>' +
            '<div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>';

$('#whatever3').html(html3);

score 0 · Answer 4 · answered Dec 11 '12 at 14:37

0

there may be a problem with single and double quotes

$('.whatever').html(
   '<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div>'+
   '<div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div>'+
   '<div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>'
);

http://jsfiddle.net/83DSu/

answered Dec 11 '12 at 14:37

Scipion

1,350
1
10
16

It works fine. It's only that you didn't specified correct links for the pictures. – Stéphane Bruckert Dec 11 '12 at 14:48

score 0 · Answer 5 · answered Dec 11 '12 at 14:47

Another approach would be:

var imgList = [
        ["img/happy-man.jpg","left"]
        ,["img/happy-woman.jpg","happy"]
        ,["img/happy-celeb.jpg","right"]
    ], cur=0,
    whatever = $('#whatever');
    whatever.html("");

$.each(imgList,function(){
    console.log(imgList[cur][1]);
    whatever
        .append( $("<div />")
                .addClass("pic")
                .html( $("<img />")
                      .addClass(imgList[cur][1])
                      .attr("src",imgList[cur][0])
                    )
              );
        cur++;
});

It looks more complicated, but it gives you a bit quicker control over the HTML and puts all of your links in one place.

http://jsfiddle.net/daCrosby/Fwwd3/

What's wrong with my .html() syntax?

5 Answers5