1

问题是：

我得到以下结构（在 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 元素一起使用时有一个已知错误，记录在这里。.replaceWith最后在内部使用该方法。

一个解决方案是使用原生 Javascript 和方法，除了.innerHTML. 像这样的东西应该工作：

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

它确实如此，但仅限于优秀的浏览器。var.get(0)上的方法有些问题。$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 大师/忍者 :)

好的，经过更多阅读后，我想我已经找到了为什么.insertBefore不起作用。

正如 jQuery API 所述（http://api.jquery.com/jQuery/#creating-new-elements），当我将作为字符串传递时，由于其复杂性<article>，DOM 元素也是通过创建的。.innerHTML

有没有办法强制$()使用本机 createElement 代替？我知道它在性能方面很糟糕，但至少它会让 IE 工作。

4

2 回答 2

1

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

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

$victim.replaceWith(fresh);
于 2010-01-30T06:11:14.453 回答
0

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

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

于 2010-01-28T12:00:32.140 回答