CODEWITHSUNDEEP
javascriptjqueryhtmlcssstring
lboyel
lboyel

Reputation: 2228

html concatenation syntax error: unexpected identifier

I am trying to concatenate html inside a variable. I was able to this successfully without any syntax error

htmlstr = "";
htmlstr += "<p>some paragraph";
htmlstr += "<p>another paragraph </p>";

$(list).html(htmlstr);

But when I try to this

htmlstr = "";
htmlstr += "<button class="first"></button>";
htmlstr += "<button class="second"></button>";

$(list).html(htmlstr);

I get an error "Uncaught syntaxerror: Unexpected Identifier from the browser. Am I doing this the wrong way?

Upvotes: 0

Views: 1162

Answers (7)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

your code 

 htmlstr += "<button class="first"></button>";
            ^ string       ^ var ^ string   ^

in your code first is variable so your getting error instead of string

correct way

 htmlstr += '<button class="first"></button>';
            ^                               ^  //changed to single quotes
 htmlstr += '<button class="second"></button>';

Upvotes: 5

Shannon Duncan
Shannon Duncan

Reputation: 178

If first and second are variables then you do waht Donovan Charpin said. However if it is the name of the class you can try this:

    htmlstr = "";
    htmlstr += "<button class='first'></button>";
    htmlstr += "<button class='second'></button";
    $(list).html(htmlstr);

Did not realize someone beat me to the punch on that.

Upvotes: 1

Mike Brant
Mike Brant

Reputation: 71424

The problem is that you are not escaping your quotes around class property value. My suggestions would be to use single quotes around your strings to eliminate the need for escaping double quotes:

        htmlstr = '';
        htmlstr += '<button class="first"></button>';
        htmlstr += '<button class="second"></button>';

        $(list).html(htmlstr);

Upvotes: 1

Jason P
Jason P

Reputation: 27022

In your current code, the quotes are terminating the string literal. You need to switch up or escape your quotes:

htmlstr += '<button class="first"></button>';

or 

htmlstr += "<button class=\"first\"></button>";

Upvotes: 3

Bram Vanroy
Bram Vanroy

Reputation: 28505

       htmlstr = "";
        htmlstr += "<button class='first'></button>";
        htmlstr += "<button class='second'></button>";

        $(list).html(htmlstr);

You can't use " inside ". Use ' instead. This second (embeded) " will be seen as the closing tag for that string, but it isn't. It is part of that string. So just use the alternative (but equally useful) '.

Upvotes: 1

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

Instead of use " use ' for value of attribute try this: 

                htmlstr = "";
                htmlstr += "<button class='first'></button>";
                htmlstr += "<button class='second'></button>";

Upvotes: 2

Donovan Charpin
Donovan Charpin

Reputation: 3397

Use "+" to concatenate variable and text 

htmlstr = "";
htmlstr += "<button class="+first+"></button>";
htmlstr += "<button class="+second+"></button>";
$(list).html(htmlstr);

Or this if you have no variable but double and simple quote

htmlstr = "";
htmlstr += "<button class='first'></button>";
htmlstr += "<button class='second'></button>";
$(list).html(htmlstr);

Upvotes: 2

Related Questions