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输出字符串时，我得到了预期的结果 - 也就是整个内部HTML内容字符串div id="wrapper"：

<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();

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

2 个答案: