does innerHTML work with XML Elements?

Question

According to JavaScript: The Definitive Guide: "Despite its name, innerHTML can be used with XML elements as well as HTML elements".

However, when I actually attempt to access the innerHTML property of an XML Element object, undefined is returned:

var xml = $.ajax({url: "test.xml", async: false}).responseXML.documentElement;
console.log(xml.innerHTML); // displays "undefined" in console log

What is the explanation for this behavior?

test.xml:

<?xml version="1.0" encoding="utf-8"?>
<foo><bar>baz</bar></foo>

Ligroin

What does your response XML look like? – Westmoreland

Edited question to contain XML response. – Ligroin

Answer 1

The explanation is that the book is wrong on this point.

XML elements in IE have a non-standard xml property that provides the equivalent of innerHTML. For other browsers you'll need to use an XMLSerializer.

Deltoid

I was hoping that wasn't the case (I've got the latest edition!). Thanks for response. – Ligroin

You'd expect a book that big to have a few mistakes, but it's not exactly a typo and it's on its sixth edition so I am little surprised. – Deltoid

@BoltClock: Books are often wrong, even the usually excellent JavaScript: The Definitive Guide. I don't think I own a JS book that doesn't have any mistakes. – Deltoid

I know. That was merely there to lighten things up :) – Westmoreland

Answer 2

The earlier answers don't address the newer browsers that exist as of September 2014. When an XML document is created with:

var parser = new DOMParser(); 
var doc = parser.parseFromString(data, "text/xml");

where data is the XML document as a string, then the following are true:

• In Firefox 28, and Chrome 36, the nodes in doc have an innerHTML field that contains the XML serialization of the contents of the node.

• In IE 9, 10 and 11, Safari 7.0 and Opera 12, the nodes in doc have neither an innerHTML field nor an xml field. I was not able to identify something that could stand for these fields. There does not appear to be any other option than using XMLSerializer for these browsers.

Flory

This is so weird. I would not expect a property called innerHTML to work on anything but HTMLElement objects. I wonder if it is expected behavior as of the latest standards? FYI, I came back to this question and discovered your answer while answering this question. – Westmoreland

Answer 3

HTML5 defines there to be innerHTML on XML Elements (despite the name, using XML parser/serializer). Nothing implements this yet. Opera has for a while supported innerHTML in XHTML (though not XML generally), but uses the HTML parser/serializer for it.

Mccandless

Why does HTML5 have anything to say about XML? – Deltoid

Comes from the spec DOM Parsing and Serialization. It looks like some HTML leaked into the XML world. – Helicoid

Answer 4

You can do so, but I'd rather prefer to use jQuery because it is easier to implement. The jQuery way is selecting the element container that you want. Then you can use the html() property to change or get the innerHTML of your element.

$("myxmltag").html("<achildtag>Hello</achildtag><anotherchildtag>World!</anotherchildtag>");

For more information about this property, refer to: http://api.jquery.com/html/

Also, don't forget the differences between html() and text(), and you can use other properties to manipulate the elements within a node in your xml using jQuery, like append(), prepend(), after(), etc...

Unmarked

jQuery's html() documentation explicitly states that the method is not available on XML documents. – Ligroin

I don't know why, but it worked for me. Well, I think that it is because I create manually the xml, I mean, I didn't get it from server. – Unmarked