Adding content dynamically in JQuery Mobile - jquery-mobile

Question

I'm using JQuery Mobile 1.2.0 version.
I want to put some html code in this context:
<div id="div-primeros" data-role="collapsible" data-theme="a" data-content-theme="c" data-collapsed="false">
<h2>Primeros</h2>
[I WANT TO ADD CODE DYNAMICALLY HERE]
</div>
And the code I want to add is:
<div class="ui-grid-a">
<div class="ui-block-a" style="width:93%">
<ul data-role="listview" style="width:100%">
<li id="4" data-icon="false">
<a href="index.html">
<img src="some.jpg"></img>
<h3>some text</h3>
<span class="ui-li-count">some text</span>
</a>
</li>
</ul>
</div>
<div class="ui-grid-b" style="width:7%">
<input cant="1" type="number" value="0" min="0" max="8" style="width:100%">
</div>
</div>
So I tried doing this using this code ("primero" is a JSON variable):
$("#div-primeros").append(
"<div id=\"" + i + "\" data-role=\"listview\" class=\"ui-grid-a\">" +
"<div class=\"ui-block-a\" style=\"width:95%\">" +
"<ul style=\"width:100%\">" +
"<li id=\"" + primero.id + "\" data-icon=\"false\">" +
"<a href=\"menu_detalle.html\">" +
"<img src=\"" + primero.thumb + "\"></img>" +
"<h3>" + primero.nombre + "</h3>" +
"<p>" + primero.descripcion + "</p>" +
"<span class=\"ui-li-count\">" + primero.precio + "</span>" +
"</a>" +
"</li>" +
"</ul>" +
"</div>" +
"<div class=\"ui-grid-b\" style=\"width:5%\">" +
"<input cant=\"" + primero.id + "\" type=\"number\" value=\"0\" min=\"0\" max=\"8\" style=\"width:100%\">" +
"</div>" +
"</div>");
The result is that the content not formatted correctly, and this content is out of collapsible "div-primeros".
What am I doing wrong??? I've tried with:
$("div-primeros").trigger("create");
and
$("div-primeros").page();
with no successful results.
Anyone knows how can I refresh all the code?
Thank you so much!!!
Bye

Answer 1

Don't break it up in multiple lines, use single quotes in place of the double quotes surrounding the html you want to append. Like so:
$('#div-primeros').append('<div class="ui-grid-a"><div class="ui-block-a" style="width:93%"><ul data-role="listview" style="width:100%"><li id="4" data-icon="false"><img src="some.jpg"></img><h3>some text</h3><span class="ui-li-count">some text</span></li></ul></div><div class="ui-grid-b" style="width:7%"><input cant="1" type="number" value="0" min="0" max="8" style="width:100%"></div></div>');
Here's a fiddle. http://jsfiddle.net/wU6pr/