Question

I have a really annoying problem. I got this bunch of code which runs and should put some information from XML into several table slots.

var xmlDoc;
$(document).ready(function() {
    //Load XML
    importXML();
    ///////////////////////////////////////////////////////////////////////////////////////
});

function importXML() {
    $.ajax({
        type: "GET",
        url: "adList.xml",
        dataType: "xml",
        success: assignXML
    });
}

function assignXML(myXML) {
    xmlDoc = myXML;
    pushContent();
}

function pushContent() {
    var len = xmlDoc.getElementsByTagName('advertisement').length;
    for (i = 0; i < len; i++) {
        var trElement = document.createElement('tr');
        console.log($(xmlDoc).find('advertisement').eq(i).find('image').text());
        var image = $(xmlDoc).find('advertisement').eq(i).find('image').text();
        var imageTD = document.createElement('td');
        var imageIn = document.createElement('input');
        imageIn.setAttribute('type', 'text');
        imageIn.setAttribute('name', 'imageArr[]');
        imageIn.setAttribute('size', '15');
        imageIn.setAttribute('value', image);
        imageTD.appendChild(imageIn);
        trElement.appendChild(imageTD);
        console.log(trElement);
    }

All of the information is there. I can look up the tr in the javascript code with firebug and it works correctly. It isn’t throwing any errors. It just doesn’t show up on the page or in the html. What am I doing wrong?

Answer 1

Change this…

var trElement = document.createElement('tr');

to this…

var table = document.getElementById('my_table'),
    trElement = table.insertRow(table.rows.length);

DEMO: http://jsfiddle.net/7gDhq/1/