问题是:
我得到以下结构(在 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 工作。