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?
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>';
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>";
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);
first and second are variables?Instead of use " use ' for value of attribute
try this:
htmlstr = "";
htmlstr += "<button class='first'></button>";
htmlstr += "<button class='second'></button>";
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) '.
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);
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.
\"first\"