javascript - 使用 jQuery 缩短创建 DOM 片段的代码

Question

我有以下代码来创建一个元素树，我将其用作 JsTestDriver 单元测试的输入。可以使用 jQuery 来跟踪吗？我研究了 jQuery.parseHTML 函数，但我最终需要提取 DOM 元素。

var doc = document.implementation.createHTMLDocument('');
var root = doc.createElement('DIV');
root.appendChild(doc.createTextNode('Web '));
var span1 = doc.createElement('SPAN');
span1.setAttribute("class", HL_CLASS);
span1.appendChild(doc.createTextNode('browsers'));
root.appendChild(span1);
root.appendChild(doc.createTextNode(' must '));
var span2 = doc.createElement('SPAN');
span2.setAttribute("class", HL_CLASS);
span2.appendChild(doc.createTextNode('die'));
root.appendChild(span2);
root.appendChild(doc.createTextNode(''));

Answer 1

如果没有 jQuery，它可能会大大缩短:在第二行之后，只需将包含 HTML 的字符串分配给 root.innerHTML:

var doc = document.implementation.createHTMLDocument('');
var root = doc.createElement('DIV');
root.innerHTML =
    'Web <span class="' + HL_CLASS +
    '">browsers</span> must <span class="' + HL_CLASS +
    '">die</span>';

使用 jQuery，您可以使用 $() 函数执行相同的操作，该函数接受包含 HTML 片段的字符串并为它们创建 DOM 元素(并将顶级元素存储在 jQuery 中)它返回的对象)。

var doc = document.implementation.createHTMLDocument('');
var root = $(
    '<div>' +
    'Web <span class="' + HL_CLASS +
    '">browsers</span> must <span class="' + HL_CLASS +
    '">die</span>' +
    '</div>',
    doc)[0];

请注意，对于 jQuery 版本，我必须将您的自定义文档作为第二个参数传递。

通过一些简单的模板可以使这两者变得更清晰(并且有许多模板实现可供选择)。这是一个非常非常基本的示例，没有任何模板引擎，只是为了展示其好处:

var doc = document.implementation.createHTMLDocument('');
var html = 
    '<div>' +
    'Web <span class="{HL_CLASS}">browsers</span> ' +
    'must <span class="{HL_CLASS}">die</span>' +
    '</div>';
var root = $(html.replace(/\{HL_CLASS\}/g, HL_CLASS), doc)[0];

不过，理想情况下，您可以从可以正确编辑它的文件中动态加载该模板(使用构建工具将其嵌入到生产中)，而不是字符串文字。