JQuery написать HTML в переменную

Question

Я пишу приложение из двух списков, в котором данные из одного списка могут быть перемещены в другой список.

Я использую DIV вот так

             <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">&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: user2@nodomain.com</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>

для удаления данных из div я использую следующий скрипт

          $("#move_new").click(function() {     
    $('#all_users .innertxt').each(function() {
    $(this).remove();
    }); 
});         

Теперь мне нужно:

добавить новые данные в DIV.

я попробую следующий код

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

где new_data_var - переменная, которая содержит следующее значение HTML

      <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">&nbsp;&nbsp;Select it.</label>
    </li>
    </ul>
    </div>

Я хочу выяснить, как я могу сохранить значение выше HTML в new_data_var?

секунд, если мои значения поступают из MYSQL и PHP, как я могу использовать это в цикле для добавления других значений.

Спасибо

Answer 1

Чтобы сохранить HTML-код в переменной, вы можете использовать это:

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">&nbsp;&nbsp;Select it.</label></li></ul></div>');
$('#all_users').append(new_data_var);

Answer 2

То же, что и другие, предложенные на самом деле, я рекомендую использовать jQuery для создания HTML-кода перед его добавлением, это минималистская версия, но вы можете сгенерировать лот аналогичным образом.

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">&nbsp;&nbsp;Select it.</label>
    </li>
  </ul>
);

Answer 3

Попробуйте обернуть ваш код в вызов jquery set:

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