Accessing a nested DocumentFragment

Question

I can navigate the elements perfectly fine in Chrome's console, but I cannot seem to get a reference to the nested DocumentFragment with childNodes or firstChild.

Here's the code in jsFiddle: http://jsfiddle.net/Ge8au/2/

Here's the code:

function withoutJquery(html)
{
    var temp = document.createElement("div");
    temp.innerHTML = html;

    var fragment = document.createDocumentFragment();
    var child;

    while (child = temp.firstChild)
    {
        fragment.appendChild(child);
    }

    return fragment.firstChild;
}


function withJquery(html)
{
    var fragment = document.createDocumentFragment();

    fragment.appendChild( jQuery.buildFragment([html],document) );

    return fragment.firstChild;
}


var ajaxHTML = "";
ajaxHTML += "<template>\n";
ajaxHTML += "    <div>asdf</div>\n";
ajaxHTML += "    <div>\n";
ajaxHTML += "        <span>asdf</span>\n";
ajaxHTML += "    </div>\n";
ajaxHTML += "</template>";


// Gives the <template>
console.log( withoutJquery(ajaxHTML) );
console.log( withJquery(ajaxHTML) );

// Where are the <div>'s?
console.log( withoutJquery(ajaxHTML).childNodes.length );
console.log( withJquery(ajaxHTML).childNodes.length );

What's your expected result on the latest console.log? Because it seems to work just fine for me (gives a length of 5, the 2 div and 3 `\n`) — Py., Jun 06 '13 at 21:12
If you can use jquery, you can do it with context selection, ie $('nodes', fragment); — adrian, Jun 06 '13 at 21:13
@amchang87 interesting idea, but doesn't that convert to DOM, thereby causing additional reflows? — Steven Vachon, Jun 06 '13 at 23:23
Well I'm not sure of the tech details (I don't have time to read jQuery source), but if I remember correctly all the operations happen in the fragment rather than the main document. By the way, if you're scared of performance, I wouldn't be so worried. I think I've checked some performance charts recently and they've optimized for like lots of appends in a row or something, or basically constant operations. So fragment is getting less useful and actually slower. But check the charts for yourself. — adrian, Jun 07 '13 at 00:54
@amchang87 yeah, it is interesting: http://stackoverflow.com/questions/14203196/does-using-a-document-fragment-really-improves-performance — Steven Vachon, Jun 07 '13 at 01:18

jcsanyi · Accepted Answer · 2013-06-06T23:49:07.350

1

Try returning fragment.firstChild.content instead of fragment.firstChild.

Since this appears to vary slightly by browser, a better solution would be something like this:

var toReturn = fragment.firstChild;
return (toReturn.content ? toReturn.content : toReturn.childNodes);

It looks like there's some confusion by browser about whether the childNodes is needed as well - with the above code, you can probably remove childNodes from the console.log() statements.

edited Jun 06 '13 at 23:49

answered Jun 06 '13 at 21:13

jcsanyi

8,133
2
29
52

this works :: fragment = (fragment.content) ? fragment.content : fragment.childNodes; – Steven Vachon Jun 06 '13 at 23:28
I think you just want this instead: `fragment = (fragment.content) ? fragment.content : fragment` since you're calling childNodes outside of the function. – jcsanyi Jun 06 '13 at 23:29
if you mention removing the post-function childNodes, I think this will make more sense to people: `var toReturn = fragment.firstChild; return (toReturn.content) ? toReturn.content : toReturn.childNodes;` – Steven Vachon Jun 06 '13 at 23:40

Accessing a nested DocumentFragment

1 Answers1