javascript - 将任意 HTML 插入 DocumentFragment

Question

我知道adding innerHTML to document fragments最近已经讨论过，并且有望包含在 DOM 标准中。但是，在此期间您应该使用什么解决方法？

也就是取

var html = '<div>x</div><span>y</span>';
var frag = document.createDocumentFragment();

我想要 frag 中的 div 和 span，使用简单的一行代码。

没有循环的加分。 jQuery 是允许的，但我已经尝试过 $(html).appendTo(frag); frag 之后仍然是空的。

Answer 1

这是modern browsers中的一种方式没有循环:

var temp = document.createElement('template');
temp.innerHTML = '<div>x</div><span>y</span>';

var frag = temp.content;

或者，作为可重复使用的

function fragmentFromString(strHTML) {
    var temp = document.createElement('template');
    temp.innerHTML = strHTML;
    return temp.content;
}

更新:我找到了一种更简单的方法来使用 Pete 的主要想法，将 IE11 添加到组合中:

function fragmentFromString(strHTML) {
    return document.createRange().createContextualFragment(strHTML);
}

覆盖率优于<template>方法，在IE11、Ch、FF中测试ok。

提供现场测试/演示 http://pagedemos.com/str2fragment/