jquery write html into variable

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: [email protected]</li>
    <li style="padding-top:5px;">
    <input type="checkbox" id="select1" value="1" class="selectit" />
    <label for="select1">&nbsp;&nbsp;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: [email protected]</li>
    <li style="padding-top:5px;">
    <input type="checkbox" id="select2" value="2" class="selectit" />
    <label for="select2">&nbsp;&nbsp;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: [email protected]</li>
    <li style="padding-top: 5px;">
    <input type="checkbox" class="selectit" value="1" id="select1">
    <label for="select1">&nbsp;&nbsp;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

Try wrapping your code in jquery set call:

$('#all_users').append( $(new_data_var) ); 

Answer 2

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: [email protected]</li><li style="padding-top: 5px;"><input type="checkbox" class="selectit" value="1" id="select1"><label for="select1">&nbsp;&nbsp;Select it.</label></li></ul></div>');
$('#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: [email protected]</li>
    <li style="padding-top: 5px;">
      <input type="checkbox" class="selectit" value="1" id="select1">
      <label for="select1">&nbsp;&nbsp;Select it.</label>
    </li>
  </ul>
);