jquery write html into variable - php

Question

i am writing two list application where data from one list can be shifted to other list.
i am using DIV like this
<div id="all_users">
<div id="user1" userid="1" class="innertxt"> <img src="images/images.jpg" width="50" height="50"><strong>Test User 01</strong>
<ul>
<li>User ID: 1</li>
<li>Email: user1#nodomain.com</li>
<li style="padding-top:5px;">
<input type="checkbox" id="select1" value="1" class="selectit" />
<label for="select1"> Select it.</label>
</li>
</ul>
</div>
<div id="user2" userid="2" class="innertxt"> <img src="images/images.jpg" width="50" height="50"><strong>Test User 02</strong>
<ul>
<li>User ID: 2</li>
<li>Email: user2#nodomain.com</li>
<li style="padding-top:5px;">
<input type="checkbox" id="select2" value="2" class="selectit" />
<label for="select2"> Select it.</label>
</li>
</ul>
</div>
<div class="float_break"></div>
</div>
for removing data from div i use following script
$("#move_new").click(function() {
$('#all_users .innertxt').each(function() {
$(this).remove();
});
});
now what i need is:
add new data into DIV.
i try following code
$('#all_users').append(new_data_var);
where new_data_var is variable which contain following HTML value
<div class="innertxt" userid="1" id="user1"> <img height="50" width="50" src="images/images.jpg"><strong>Test User 01</strong>
<ul>
<li>User ID: 1</li>
<li>Email: user1#nodomain.com</li>
<li style="padding-top: 5px;">
<input type="checkbox" class="selectit" value="1" id="select1">
<label for="select1"> Select it.</label>
</li>
</ul>
</div>
i want to figure out how can i store above HTML value into new_data_var ?
second if my values are coming from MYSQL & PHP how can i use this in loop to add more values.
Thanks

Answer 1

To store HTML-code to a variable, you could use this:
var new_data_var = $('<div class="innertxt" userid="1" id="user1"> <img height="50" width="50" src="images/images.jpg"><strong>Test User 01</strong><ul><li>User ID: 1</li> <li>Email: user1#nodomain.com</li><li style="padding-top: 5px;"><input type="checkbox" class="selectit" value="1" id="select1"><label for="select1"> Select it.</label></li></ul></div>');
$('#all_users').append(new_data_var);

Answer 2

Try wrapping your code in jquery set call:
$('#all_users').append( $(new_data_var) );

Answer 3

Same as the others suggested really, I recommend using jQuery to build your HTML prior to appending it, this is a minimalist version but you could generate the lot in a similar manner.
var new_data_var = $('div', {'id': 'user1', class: 'innertxt'}).html('
<img height="50" width="50" src="images/images.jpg"><strong>Test User 01</strong>
<ul>
<li>User ID: 1</li>
<li>Email: user1#nodomain.com</li>
<li style="padding-top: 5px;">
<input type="checkbox" class="selectit" value="1" id="select1">
<label for="select1"> Select it.</label>
</li>
</ul>
);