html concatenation syntax error: unexpected identifier

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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.