Mam następujący kod, aby utworzyć drzewo elementu, którego używam jako wejście do testu jednostkowego Jstestdriver. Czy mógłby być przestrzeganie jQuery? Spojrzałem na funkcję jQuery.parsehtml, ale w końcu muszę wyodrębnić element 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(''));
0
prasopes 18 sierpień 2014, 23:59

2 odpowiedzi

Najlepsza odpowiedź

Można go zwartować dramatycznie bez jQuery: po drugiej linii, po prostu przypisz ciąg zawierający HTML do 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>';

Z jQuery możesz zrobić wiele tej samej rzeczy z funkcją $(), która akceptuje struny zawierające fragmenty HTML i tworzy elementy DOM dla nich (i przechowuje elementy najwyższego poziomu w zwrowieniu JQuery Obiekt).

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

Zauważ, że z wersją jQuery musiałem przekazać dokument wybudowany na zamówienie jako drugi argument.

Oba te mogą być nieco wyraźniejsze z odrobiną prostej szablonowania (i istnieją wiele implementacji szumów do wyboru). Oto bardzo, bardzo podstawowy przykład bez silnika szumowego, aby pokazać korzyść:

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

Najlepiej jednak ładujesz ten szablon dynamicznie z pliku, w którym można je poprawnie edytować (za pomocą narzędzia budowy do osadzenia go do produkcji), a nie literałów strunowych.

2
T.J. Crowder 18 sierpień 2014, 20:18

Coś w tym stylu:

var $dock = $('body'), $root = $('<div/>', { 'id' : 'adOverlay' }), 
    $container = $('<div/>', { 'id' : 'adContainer' }).appendTo($root),  
    $exterior = $('<div/>', { 'id' : 'adOutdoor' }).appendTo($container), 
    $interior = $('<div/>', { 'id' : 'adInterior' }).appendTo($container), 
    $retrovisor = $('<div/>', { 'id' : 'adRetrovisor' }).appendTo($interior), 
    $retrovisorInner = $('<div/>').appendTo($retrovisor), 
    $close = $('<div/>', { 'id' : 'adOverlayClose' }).append('<div>&times;</div>').appendTo($root);
    $root.appendTo($dock);

EDYTOWAĆ

Mam na myśli myślę, że jest czystym sposobem, aby to zrobić, ale można również użyć .html('<div>you html here</div>');

0
Santiago Rebella 18 sierpień 2014, 20:15