XML to HTML using Javascript- Inline elements

[LAJ]

Hello,

I've thus far been able to create basic XML to HTML conversions with Javascript, using Xpath in Firefox to pluck 'para' elements in the file and assign them to 'p' elements in HTML, for example. I'm using the document.createElement method, i.e:

articleHeading = document.createElement('h2');
articleHeading.appendChild(document.createTextNode(articleTitle));
document.getElementById('article').appendChild(articleHeading);

What I'm currently struggling with though is inline XML elements, so:

<article>
<para>This is a <link to='link location'>link</link> in a paragraph</para>
</article>

How would I separate each part of the para element's contents to append them one at a time to a paragraph? i.e. how would I pluck 'This is a ' by itself so that I can append it to a paragraph, then process the contents of the <link> element and append that to the paragraph, then finally add 'in a paragraph' at the end? As it is, the word 'link' appears in the paragraph but the <link></link> tags are ignored.

The XML file will contain different 'articles' that can link to one another, so I'd eventually I'd like a dynamic linking system in place so that if <link type='article'><article_id>4</article_id></link> appears then javascript generates an HTML link to the article with an ID of 4.

Thanks.

[jkmyoung]

You could create seperate functions for each type of element you encounter, each returning/attaching a particular result node.

To be honest, I'd recommend an xslt approach, as xml-> xml is pretty much what it's designed for.

[LAJ]

My original plan was to use XSLT but I needed support for multiple output documents so that if you click a link to one article, a new page would load that would only load that article from the XML file. Is there a way to do that in XSLT1.0?

[jkmyoung]

If you're using javascript to run the xslt, you could have an onclick function that does the following:

1. Set some parameter to the article ID.
2. Run XSLT with this parameter.
3. Using the param, the XSLT only runs on this particular XML file.

eg something like
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
xmlDoc.async = false;
xmlDoc.resolveExternals = false;
xmlDoc.load("articles.xml");
xslProc = xslt.createProcessor();
xslProc.input = xmlDoc;

xslProc.addParameter("articleID", myvalue);

xslProc.transform();

[LAJ]

Thanks! I tried out XSLT again and I've got it working (or rather I'm getting there :))

[Lazer]

Hi.
I had to convert XML to HTML. the code is not very simple...
so I used PHP. you have a single command to do so!
if you want a code in JS I can give you the link but I really think you should use PHP or ASP.

GoodLuck!

[LAJ]

What I'm actually doing is creating a daily journal for myself, which I want to store in XML and then view in (X)HTML, so I'm probably going to stick with client-side so that I can just view my journal in my browser without running any server software.

I'm getting the hang of XSLT but I'm still having problems with in-line elements :/ Just say I had the following paragraph:

<para>Today I watched <film>The Shawshank Redemption</film>.</para>

If I wanted the text within 'film' to be in italics, having the following two templates in the XSLT file won't work:

<xsl:template match="para">
<p><xsl:value-of select="."/></p>
</xsl:template>

<xsl:template match="film">
<em><xsl:value-of select="."/></em>
</xsl:template>

In this example, the output would just be '<p>Today I watched The Shawshank Redemption.</p>'. Changing 'value-of' in the para template to 'copy-of' results in '<p>Today I watched <film>The Shawshank Redemption</film>.</p>'. In this simple example all I'd want to do is convert 'film' elements to 'em' elements before the para template is processed, so that 'copy-of' copies '<p>Today I watched <em>The Shawshank Redemption</em>.</p>' It seems like something so basic yet I can't seem to find any tutorials or examples to tell me how to do it so can anyone else point me in the right direction please?

[jkmyoung]

<xsl:template match="para">
<p><xsl:apply-templates/></p>
</xsl:template>

[LAJ]

Man, I'm such a noob lol! :) Thanks! I can't believe I was stumped by something so basic (I swear I did that before and it didn't work).

Thanks again!