有没有办法将字符串从 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 元素结合使用时存在一个已知错误，记录在 here。 .replaceWith 最终在内部使用该方法。

---

一种解决方案是使用原生 Javascript 和除 .innerHTML 之外的方法。像这样的东西应该可以工作：

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

确实如此，但仅限于优秀的浏览器。 $fresh var 上的 .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

您的错误实际上可能比您想象的更早发生。当您将basket.shift() 包装在$() 中时，它实际上正在被添加到隐藏的div 中。你有没有试过这个：

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

$victim.replaceWith(fresh);

Answer 2

IE 在处理 HTML5 元素时会导致错误，因此请尝试从此页面下载脚本并将其包含在文档头部的任何其他元素之前： http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

这应该可以防止由 IE 中的 HTML5 元素引起的错误