jQuery XML PARSE

Question

Lets say i have an xml.. "xml2.xml"

<aurora>
<event> abc </event>
<event> abc </event>
<event> abc </event>
<event> 
<subeve> def </subeve>
<subeve> def </subeve>
<subeve> def </subeve>
</event>
<event> 
<subeve> def </subeve>
<subeve> def </subeve>
<subeve> def </subeve>
</event>
</aurora>

And there is a jquery code..

<script>
$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "xml2.xml",
        dataType: "xml",
        success: xmlParser
    });
});
function xmlParser(xml) {
    $(xml).find("event").each(function () {

        $(".slides").append('<b>1');

        $(this).find("subeve").each(function () {
        $(".slides").append('<i>2</i>');
        });
        $(".slides").append('</b>');

    });
}
</script>

The output is : <b>1111</b><i>222</i><b>1</b><i>222</i>

But i want the output to be.. : <b>1111<i>222</i>1<i>222</i></b>

How can i do this..??

My second ques.. Is my first ques really silly?? :-<

Answer 1

You're thinking in terms of markup (<b> and then later </b>), but once you're dealing with DOM elements, you're dealing with objects, not markup. Specifically, when you do $(".slides").append("<b>");, that creates a b element and appends it to slides. It doesn't "open" a <b> tag. Then when you later do $(".slides").append("<i>2</i>"); it creates an i element and appends that to slides, after the b element, not within it. I don't know what jQuery does with .append("</b>"), don't do that. :-)

You can either build up elements and append them as you go (appending the i elements to each b, and appending b to .slides), or build up a markup string and append it to .slides when you're done.

The first option, building up elements, might look like this:

function xmlParser(xml) {
  var slides = $(".slides");

  $(xml).find("event").each(function () {

    var b = $("<b>").text("1");

    $(this).find("subeve").each(function () {
      b.append('<i>2</i>');
    });

    slides.append(b);
  });
}

Live Example | Source

The second option, building up markup, might look like this:

function xmlParser(xml) {
  var markup = [];

  $(xml).find("event").each(function () {

    markup.push('<b>1');

    $(this).find("subeve").each(function () {
      markup.push('<i>2</i>');
    });

    markup.push('</b>');
  });

  $(".slides").append(markup.join(""));
}

Live Example | Source

Answer 2

If you just want everything to appear in bold, use CSS:

.slides{

    font-weight:bold;

} 

If you want to use HTML tags for some different purpose, I strongly advise you to use some form of templating instead of creating raw HTML with jQuery.