有没有办法将字符串从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);