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

它适用于良好的浏览器（gecko，webkit），但jQuery在将.innerHTML与HTML5元素一起使用时存在已知错误，记录为here。 .replaceWith最终在内部使用该方法。

解决方案是使用除.innerHTML之外的本机Javascript和方法。这样的事情应该有效：

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

确实如此，但仅限于良好的浏览器。使用.get(0) var。

上的$fresh方法无法解决问题

我已经模拟了在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 guru / ninja :)

好的，经过一些阅读后，我想我已经找到了为什么.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元素导致的错误

有没有办法将字符串从JSON转换为DOM结构？

2 个答案: