从 jQuery 中的 HTML 字符串转换时缺少 HTML 元素？

Question

我已经看到How to get an HTML element from a string with jQuery - 但是，我在正确再现这些结果时遇到了问题。考虑这个例子：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="../jquery-1.12.3.min.js"></script>
  <style type="text/css">
.dispnone {
  display:none;
}
  </style>
  <script type="text/javascript">
// global var
var myHiddenHTMLstring = ""; // populate ondocready

function OnClickerClick(inbtn) {
  // attempt to generate HTML from string:
  var myHiddenElements = $(myHiddenHTMLstring);
  console.log( myHiddenElements.html() );
}

ondocready = function() {
  console.log("ondocready");
  myHiddenHTMLstring = $("#wrapper").html();
  console.log(myHiddenHTMLstring); // looks OK
  $("#clicker").click(function(){
    OnClickerClick(this);
  });
}
$(document).ready(ondocready);
  </script>
</head>

<body>
  <h1>Hello World!</h1>

  <div id="wrapper" class="dispnone">
    <table id="table1">
      <tr>
       <th> AH </th>
       <th> BH </th>
       <th> CH </th>
       <th> DH </th>
       <th> EH </th>
      </tr>
      <tr>
       <td> A1 </td>
       <td> B1 </td>
       <td> C1 </td>
       <td> D1 </td>
       <td> E1 </td>
      </tr>
    </table>
    <table id="table2">
      <tr>
       <th> HA </th>
       <th> HB </th>
       <th> HC </th>
       <th> HD </th>
       <th> HE </th>
      </tr>
      <tr>
       <td> A2 </td>
       <td> B2 </td>
       <td> C2 </td>
       <td> D2 </td>
       <td> E2 </td>
      </tr>
    </table>
  </div>

  <button id="clicker">Click to check</button>
</body>
</html>

当页面加载时，我使用以下方法捕获div id="wrapper" 的内容：

myHiddenHTMLstring = $("#wrapper").html();

当时使用console.log 输出字符串时，我得到的正是预期的——即div id="wrapper" 的整个内部HTML 内容字符串：

<table id="table1">
  <tbody><tr>
   <th> AH </th>
   <th> BH </th>
   <th> CH </th>
...
   <td> C2 </td>
   <td> D2 </td>
   <td> E2 </td>
  </tr>
</tbody></table>

但是，当我单击按钮时，我尝试使用 jQuery 构造将此字符串转换为 HTML 元素：

var myHiddenElements = $(myHiddenHTMLstring);

...然后我立即尝试使用以下方法打印其 HTML：

console.log( myHiddenElements.html() );

...但是我在这里得到的不是div id="wrapper" 的整个内部 HTML 内容字符串 - 相反，我得到了这个：

  <tbody><tr>
   <th> AH </th>
   <th> BH </th>
   <th> CH </th>
   <th> DH </th>
   <th> EH </th>
  </tr>
  <tr>
   <td> A1 </td>
   <td> B1 </td>
   <td> C1 </td>
   <td> D1 </td>
   <td> E1 </td>
  </tr>
</tbody>

...也就是说，我只获取第一个表的内部内容，而不是获取两个表？！

我做错了什么 - 如何使用 jQuery 将 HTML 字符串转换为 HTML 元素，以便 HTML 元素包含原始 HTML 字符串的全部内容？

---

编辑：忘了说我在 Firefox 43 上测试过这个；而且我刚刚尝试在两个表中插入正确的thead 和tbody 的表 - 这也无济于事，仍然存在同样的问题......

Answer 1

您的 jQuery 工作正常。 myHiddenElements 包含两个表格作为 HTML 元素。当你写myHiddenElements.html()时，你得到的是选择中第一个元素的HTML内容。这就是 HTML 字符串中第一个表格的内容。

您可以通过编写如下内容来获取两个表的 innerHTML：

myHiddenElements.find('table').each(function(){
    console.log($(this).html())
});

如果您想再次从 jQuery 对象中获取 HTML 字符串，可以使用此问题中列出的方法之一：jQuery: outer html()。或者你可以只使用你的原始字符串。

如果您想用 HTML 做其他事情，您的 myHiddenElements 字符串已经包含您需要的内容。所以这样的事情会起作用：

myHiddenElements.find('td').css('color', 'red');
$('#wrapperDiv').append(myHiddenElements);
// etc.

Answer 2

创建一个临时元素，然后clone()和append()：

$('div').append($(yourHtmlString).clone()).html();