有沒有辦法將字符串從JSON轉換爲DOM結構？

Question

問題是：

我得到以下結構（通過PHP生成）通過JSON作爲字符串發送。

<article> 

<header> 
    <h2><a href="#">url</a></h2> 
    <p><time datetime="2009-11-05">05 Nov 2009</time></p> 
</header> 

<div class="entry"> 
    <p>something</p> 
    ... 
</div> 

<footer>something</footer> 

</article> 

我有一個網站上的文章列表，我需要用接收的文章替換現有的文章。使用jQuery，我會做這樣的事情：

var $victim = $slider.find('article.loading:first'); 
    $fresh = $(basket.shift()); 

basket.shift()在上面的字符串形式接收到的文章，$victim是現有的一個。

---

現在，通常我會做

$victim.replaceWith($fresh); 

它可以在好的瀏覽器（壁虎，WebKit的），但jQuery有使用.innerHTML與HTML5元素一個已知的bug，記錄here。 .replaceWith最終在內部使用該方法。

---

解決方法是使用原生JavaScript和除.innerHTML以外的方法。像這樣的東西應該工作：

$victim.parent().get(0).insertBefore($fresh.get(0), $victim.get(0)); 

它的確如此，但只有在良好的瀏覽器，再次。 $fresh變種的.get(0)方法有些不好。

我模擬的js代碼在本地創建一個節點的插入和它在IE瀏覽器的工作原理：

var dummy = document.createElement('article'); 
    var dummyChild = document.createElement('header'); 
     txt = document.createTextNode("crap"); 
     dummyChild.appendChild(txt); 
dummy.appendChild(dummyChild); 

$victim.parent().get(0).insertBefore(dummy, $victim.get(0)); 

---

那麼，有沒有轉化串入一個DOM的任何其他方式子樹？或者通過replaceWith問題獲得其他任何方式？

注：我沒有JavaScript的大師/忍者:)

---

好了，經過一番更多的閱讀我想我已經找到了爲什麼.insertBefore不起作用。

由於jQuery API聲明（http://api.jquery.com/jQuery/#creating-new-elements），當我將<article>作爲字符串傳遞時，DOM元素也由於其複雜性而通過.innerHTML創建。

有沒有辦法強制$()使用本地createElement？我知道它性能明智，但至少它會讓IE工作。

Answer 1

與HTML5元素工作時，所以要儘量從這個頁面donwload腳本，包括它之前的任何其他文檔的頭部IE導致錯誤： http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

這應該防止由於HTML5元素的錯誤IE

Answer 2

您的錯誤實際上可能比您想象的更早發生。當你將basket.shift()包裝在$()中時，它實際上被添加到隱藏的div那時。你有沒有試過這個：

var $victim = $slider.find('article.loading:first'); 
    fresh = basket.shift(); 

$victim.replaceWith(fresh);