Adding tags to elements received from XML

Question

Current method that i'm trying to use gives out [object HTMLHeadingElement] error and now I'm completely stumped. I would like to add html tags to elements that I've received from my xml file

here is my code so far

$.ajax({
url:'xml/feed.xml',
dataType: 'xml',
success: function(data) {
    $(data).find('channel item').each(function() {
        var title = $(this).find('title').html();
        var link = $(this).find('link').text();
        var description = $(this).find('description').text();
        var pubdate = $(this).find('pubdate').text();
        var guid = $(this).find('guid').text();

        var h1Title = document.createElement('h4');
        var linktext = document.createTextNode(title);
        h1Title.appendChild(linktext);

        $('.timeline ul').append(
            $('<li />', {

                text: h1Title

            }).addClass('myBox')
        );
    });
},
error: function() {
    $('.timeline').text('Failed to get the feed');
}

});

Answer 1

You're creating a DOM element, and then setting it as text, effectively converting the DOM node to string, and the string representation of a H* element is [object HTMLHeadingElement]

var h1Title = document.createElement('h4');

$('<li />', {
    text: h1Title // you can't set a DOM node as text
})

you probably wanted to do something more like

var h1Title = $('<h4>', {text : title});

$('.timeline ul').append(
    $('<li />').append(h1Title)
}).addClass('myBox')