Recursively iterating over documentfragment nodes and all child nodes

I'm parsing an html string via createContextualFragment :

createContextualFragment

let DocumentFragmentDom = IframeDocument.createRange().createContextualFragment(this.Html);


And i'm trying to append each node separately to my ifame like this:

while(DocumentFragmentDom.children.length > 0) {
if(DocumentFragmentDom.children[0].nodeName.toLowerCase() === "script" &&
DocumentFragmentDom.children[0].hasAttribute("src"))
{
DocumentFragmentDom.children[0].addEventListener("load",RecursiveAppending.bind(this));
IframeDocument.body.appendChild(DocumentFragmentDom.children[0]);
return;
}
IframeDocument.body.appendChild(DocumentFragmentDom.children[0]);
}


you can see that if the node is a script tag with the src attribute i will add an eventlistener for the load event, and the callback is the same function, the reason i'm doing this is because if i have got in my html code 2 script tags , one is using external resource and the other is inline , if i will not wait for the load event for the external tag the inline will run before it even if the inline tag is below the external.

src

eventlistener

With this code everything is working perfectly but I would like to be able to append individual nodes and when the node has children, I would like to append the parent node first and than each children and if the children have children I would like to continue doing this.

children

children

children

I also need to take in consideration the eventlistener for the script tag because if i encounter a script tag with src I need to use a callback and stop appending until the event is fired and than I need to continue in the exact same point.
one more thing to consider is when you append a node from documentfragment to another document the node will be moved from the documentfragment to the new document so I'm not sure how exactly I should do that, maybe clone each node?

eventlistener

src

documentfragment

documentfragment

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.