Javascript and `<>...</>` tags

Question

So I recently discovered that I could use <>...</> tags in javascript in Firefox, which is handy when defining blocks of HTML or CSS.

GM_addStyle(<><![CDATA[
  .page { display: block }
  /* ... */
  td { vertical-align: top }
]]></>);
//...
div.innerHTML = <><![CDATA[
  <table class="section">
    <!-- ... -->
  </table>
]]></>;

But I'm not exactly sure what's going on, and I like understanding the syntax that I'm using. What exactly does <>...</> return? I noticed that the escaping works better when I enclose the contents in <![CDATA[...]]>, so what's happening there? Is this Firefox only, or cross-browser?

I tried to look this up online, but ran into the normal google/symbol issue. Plus, most of the results for google CDATA javascript didn't seem relevant.

Answer 1

I believe the empty tags are just a way of writing a root element so that you have something in which to wrap a blob of XML. It's saying "Interpret the children of this root element as XML" and the single child in your case is saying "Interpret this child as a CDATA block."

Answer 2

There's no reason to use an XMLList literal (<>...</>) with only one child, as it's handled as a single XML item anyways. Why not use just <![CDATA[...]]>? Also, <![CDATA[...]]> just returns an XML text node (<![CDATA[]]>.nodeKind() === "text").

This is all part of E4X, which is implemented by ActionScript 3 and both JavaScript engines.