I'm working on a client project, and I'm stuck on a "what's the right way to do this?" issue: the content is really well suited to XML in that I want the ability to use tags and attributes of my own creation and then modify them in Javascript, but I want to display the data as part of an (X)HTML page.
The content is a document of some sort, consisting of sections, paragraphs and sentences. <section>, <paragraph> and <sentence> are the obvious XML elements. I want Javascript to number each section, paragraph and sentence, and this is really easy to do:
sentences = pElem.getElementsByTagName("sentence");
for (var j=0; j<sentences.length; j++) {
sElem = sentences[j];
sElem.setAttribute("num", j+1);
}
But <sentence> isn't a valid HTML element, so that leaves me with <span class="sentence"> tags but then num isn't a valid attribute, so I'm still stuck. I also want to program behaviours on these elements: mouseovers of and clicks on a sentence should show additional information. <span>'s really start to fall over at this point.
On one hand, in my testing I've created my own <sentence> tag, and neither Safari or Firefox have complained about this... but the code would not pass a validation test!
On the other hand, I could get things to work usings <span>'s and <div>'s, but it would lack elegance.
Any ideas?