Search code examples
javascriptcdata

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

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.

Solution

  • 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."