jquery将html写入变量答案

【问题标题】：jquery write html into variablejquery将html写入变量
【发布时间】：2010-02-27 16:50:50
【问题描述】：

我正在编写两个列表应用程序，其中一个列表中的数据可以转移到另一个列表。

我正在使用这样的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，我如何在循环中使用它来添加更多值。

谢谢

【问题讨论】：

标签： php javascript jquery mysql ajax

【解决方案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);

【讨论】：

【解决方案2】：

尝试将您的代码包装在 jquery set 调用中：

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

【讨论】：

【解决方案3】：

真的和其他人建议的一样，我建议在附加之前使用 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>
);

【讨论】：