On Fri, Dec 17, 2010 at 8:30 AM, Paul Wadsworth <[email protected]> wrote:
> My question is: What is the difference between the following
> approaches to turning html text into dom fragments?
> And am i missing any other ways of doing the conversion?
>
> function toHTML1(html) {
> var range = document.createRange();
> range.selectNode(document.body);
> var domHTML = range.createContextualFragment(html);
> var node = domHTML.firstChild;
> while (node.nodeType != Node.ELEMENT_NODE && node.nextSibling) {
> node = node.nextSibling;
> }
> return node;
> }
>
> function toHTML2(html) {
> var div = document.createElement('div');
> div.innerHTML = html;
> return div.firstElementChild;
> }
>
> function toHTML3(html) {
> var doc = document.implementation.createHTMLDocument();
> doc.write(html);
> return document.importNode(doc.body.firstElementChild, true);
> }
>
> Context:
> I am building hybrid iPhone/iPad apps and have had trouble with using
> Element.innerHTML = "some html tag soup" to convert text into html dom
> fragments.
> Sometimes the conversion doesn't take place leaving a white screen or
> causing my app to crash because it tries to operate on a non existent
> piece of dom.
>
> Of the 3 approaches only toHTML3 worked for me.
> toHTML1 is based on apple's own iAd JS library implementation and
> stopped working when I upgraded from iOS3.2 to iOS4.2.
> All approaches work under Safari 5.0.3 which is my debug environment.
>
I would call the function toDOMFragment instead of toHTML.
This a slightly different function still using (bad) "innerHTML":
// convert HTML Fragment (string) into a DOM Fragment (dom nodes)
var toDOMFragment =
function(html, context) {
var i = 0, n, fragment, orphan;
context || (context = document);
orphan = context.createElement('div');
orphan.innerHTML = html;// write fragment
fragment = context.createDocumentFragment();
for (;n = orphan.childNodes[i++];) { fragment.appendChild(n) };
return fragment;
};
You should definitely prefer DOM manipulation over innerHTML if
possible at all. It seems to me your function "toHTML1()" is the best
since it doesn't use either "innerHTML" nor "document.write", if there
is a bug there you should file a ticket about regressions in iOS 4.2.
It is also possible to do a simple check on the passed HTML text and
see if it contains buggy elements. Only for those buggy cases use
"innerHTML" as fall back, for normal cases I believe
"createContextualFragment" would be the best and fastest choice.
--
Diego
> --
> To view archived discussions from the original JSMentors Mailman list:
> http://www.mail-archive.com/[email protected]/
>
> To search via a non-Google archive, visit here:
> http://www.mail-archive.com/[email protected]/
>
> To unsubscribe from this group, send email to
> [email protected]
>
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]
