從jQuery中的HTML字符串轉換時缺少HTML元素？

<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>

然而，當我按一下按鈕，我試圖把這個字符串轉換

var myHiddenElements = $(myHiddenHTMLstring);

...然後我馬上嘗試使用打印的HTML：

console.log(myHiddenElements.html());

...但是我來到這裏不是整個內部HTML內容字符串使用jQuery構建HTML元素的div id="wrapper" - 而是，我得到這個：

<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的表格 - 這也沒有幫助，仍然存在同樣的問題...

來源

2016-04-21 sdbbs

您的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.

來源

2016-04-21 07:19:03 KWeiss

非常感謝@KWeiss - 但令我百思不解的是這樣的：當我說' $（「＃wrapper」）。html（）'，只有一個元素，我得到它的內部HTML;但是當我說'myHiddenElements.html（）'時，該字符串沒有一個根元素，它有兩個 - 所以第一個的內部HTML被採用。這是否理解正確？謝謝！ – sdbbs

換句話說，要再次獲得相同的內容字符串，我不能只使用'$（string）.html（）' - 我必須先將'string'中的兩個表重新還原爲'div'，然後要求'div.html（）'，這是否正確？ – sdbbs

是的，這是完全正確的。 – KWeiss

創建一個臨時的元素，然後克隆（）和append（）：

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

來源

2016-04-21 07:19:16

謝謝@ Dr.Knowitall - 不知道有'.clone（）'存在，會確保檢查出來... – sdbbs

從jQuery中的HTML字符串轉換時缺少HTML元素？

回答

相關問題