View Full Version : Using cloneNode and appendChild loses style.

08-13-2006, 01:40 AM
I'm developing an AJAX toolkit in which I needed a way to write a subset of a markup language to modify the running copy of the document. When implementing part of the append parser I came against a problem. What I'm basically doing is reading the append XML tag, looking where it says It has to add code and then clone the nodes inside that tag and attempt to insert them in the document. The problem comes when I'm trying to append, it seems like all my cloned nodes lose all it's style properties, for example several <li> items would come one next to the other instead of one below the other with the round bullet separation, or an image won't load the actual image.

The example XML would be like:

<append after=\"".$rowKey."\">
<img src="images/plus.gif" alt="plus" />

And the javascript portion:

var numElems = appendTags[k].childNodes.length;
for(e = 0; e < numElems; e++)
var elemChild = appendTags[k].childNodes[e];
var elemClone = document.importNode(elemChild, true); // I've tried cloneNode and importNode, both with the same results.
object.insertBefore(elemClone, nextElement);

Anyone have any ideas? Am I doing something really stupid here?

08-13-2006, 07:38 PM
it looks to me that your xml is not quite an xml file. check wheter your server application generates a valid XML file.

08-14-2006, 12:21 AM
I copied the XML Section from my PHP code that's why It has some variables there that I didn't remove, it's just as a matter of illustration. It is in fact valid, and the javascript code works, as if I inspect the DOM the correct elements are there, it's just that they lose their attributes, they are appended in the DOM without being actually parsed as elements, the <li> does nothing, the <img> doesn't even appear, <span> <div> they are never treated as elements.

08-14-2006, 10:15 AM
Ok I found out some interesting information, that I'm going to share in case anyone else has the same problem.

Explorer doesn't like importNode at all, I didn't really notice this since I never tested in Explorer yet. On the other hand, the XML specs prohibite copying nodes from one document to another, that's why cloneNode doesn't bring the expected results, the node is cloned, but it's still owned by the old document.

The fact that my copied nodes weren't interpreted as HTML was because the returned document was in fact text/xml, so the DOM knows this, and doesn't interpret it as HTML. A way to solve this is to use a content-type of text/xml+xhtml or to do the object.innerHTML = object.innerHTML; trick after adding all your XML nodes, this magically makes the browser convert the nodes you added to HTML when re assigning them to innerHTML, I'm not sure if this trick works in IE though.

Considering all this pitfalls, anyone has a suggestion for a real way of copying html tags from an xml document over to an html document? The fact I don't set the source data to xhtml type is because it also contains XML tags that I parse with javascript client side, and add their HTML child nodes after processing that extra XML data (Like in the example in my first post).


08-14-2006, 10:27 AM
innerHTML is not a standard DOM method, thus it will not really insert the elements into the page's DOM tree, so that, if you want latter to handle them using DOM methods, it woun't work.

Probably the best way is to use a content-type text/html instead of text/xml

08-14-2006, 10:14 PM
innerHTML is not a standard DOM method, thus it will not really insert the elements into the page's DOM tree, so that, if you want latter to handle them using DOM methods, it woun't work.

That's wrong. It will really insert the elements into the page's DOM. It parses the string as markup and does something equivalent to creating a DocumentFragment, which it then inserts.

Anyway, importing nodes from an XML document into an HTML document is not a problem. If your returned XML document has properly namespaced elements in the XHTML namespace, then their DOM representation will be what you expect. From the markup you have posted, it seems everything is in the null, default namespace, so your returned XML document doesn't really contain any XHTML markup at all, just generic XML tags with the same names (but carry none of the semantics, presentation instructions, etc).

08-15-2006, 08:47 AM
How do you correctly specify the XHTML namespace around my mixed xml/html document? I assume that if the xml doc is recognized as xhtml I will get the best of both worlds, I can still parse my own tags as XML and copy/clone the html tags over to the dom?


08-15-2006, 10:50 AM