0

What is the issue regarding placing xml elements inside html ? I am trying to easily retrieve javascript event info which returns some html when a div is clicked on. I want to parse that (as I cant send any data object afaik) and its very easy so I'm doing 

<a href="#" onClick="doTap(this); return false;"><div><currency>eur</currency><price>120</price><weight>2kg</weight></div></a>

and in the js im doing 

doTap=function(sent) {      

        console.log(sent.getElementsByTagName('price')[0].innerHTML);
landed
  • 479
  • 6
  • 15

2 Answers2

2

The issue is that XML is not valid HTML (with respect to the elements). The browser does not know how to render a currency element, and afaik there is no standard way to deal with unknown elements. Some browsers might ignore them completely.

You should be fine with using span elements and giving them a class:

<div>
    <span class="currency">eur</span>
    <span class="price">120</span><
    <span class="weight">2kg</span>
</div>

a elements are not supposed to contain block elements btw.

Then get the element in question by its class.

If you don't want to display the information (currency, price, etc) but only need to store it somewhere, you can use HTML5's data-* attributes:

<a data-currency-"eur" ... ></a>

and access them with getAttribute.

Community
  • 1
  • 1
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • In particular, really, really weird things can happen in IE8. For example, unknown elements with "block" display (sometimes? always?) don't implicitly close `

    ` tags, with very strange results.

     – Pointy Feb 27 '12 at 13:40
0

The main practical problem is that IE 8 and older do not deal at all with tags they don’t know when processing HTML documents. To deal with this, you can add code like document.createElement('currency').

There are other issues, too, such as the risk that some future browsers will start recognizing the markup you have invented – and this may cause unpredictable rendering features and functionality. Some more notes: http://www.cs.tut.fi/~jkorpela/pragmatic-html.html8#custom

The safer approach is to use span elements with class. You can also use a elements, since without href, they are still valid but do not create links, making the element effectively just a text-level container. By HTML syntax rules, though, you must not nest a elements (but browsers don’t care, in things like this).

So the safest approach uses e.g. <span class=currency>EUR</span> etc. instead.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I'm happy to use span but I'm just not sure how to get the data easily thats why I tried with xml. I'm not trying to get an element of the DOM in this case its an event cause by onClick. – landed Feb 27 '12 at 14:23
  • It becomes just a little more complicated when using `span` with class, e.g. get all `span` elements and then pick up those with the right class. And you need the DOM anyway – even `getElementsByTagName` relies on the DOM. – Jukka K. Korpela Feb 27 '12 at 15:15
  • This is my point I don't want to use the DOM thats why I used xml ! I'm working on an event sent via onClick which afaik a small piece of html in my case so a segment of the original DOM. Or is this not how it works. I know that this MUST have been a problem for so many people before. I am using html5 so that might be meaning the a tag solution given above. But will that work on NON DOM html. – landed Feb 27 '12 at 17:57
  • I have no idea of what you mean by non-DOM html and why don’t want to use the DOM. In any case, using XML markup inside HTML will not avoid the DOM – Jukka K. Korpela Feb 27 '12 at 18:34
  • when you click an html anchor with an onClick event what gets passed ? It isnt the DOM it is a selection of html representing the item clicked. AFAIK - perhaps I am wrong. But DOM functions just don't work. Im trying to get information into the event about which button was pressed. – landed Feb 27 '12 at 21:02