Question

i have this code function, im trying to get an html and appendchild a li into the html received in msg but not working

function handleFileSelect(evt)
{
    var files = evt.target.files;
    $('#visor_zone').fadeOut(600);
    $('#visor_zone').empty();
    $.ajax(
    {
        url: '/home/visor_publicacion',
    }).done(function(msg)
        {
            var html=msg;
            for (var i = 0, f; f = files[i]; i++)
            {
                if (!f.type.match('image.*')) 
                {
                    continue;
                }
                var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                        var li = document.createElement('li');
                        li.innerHTML = ['<li><a><img ref="', e.target.result,'" src="', e.target.result,'"/></a><span>esta es la foto agregada</span></li>'].join('');
                        //li.innerHTML = ['Nombre: ', escape(theFile.name), ' || Tamanio: ', escape(theFile.size), ' bytes || type: ', escape(theFile.type), '<br /><img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/><br />'].join('');
                        html.getElementById('pikame').appendChild(li);
                    };
                })(f);
                reader.readAsDataURL(f);
            }
            $('#visor_zone').fadeIn(600,function()
                {
                    $('#visor_zone').html(html);
                    $("#pikame").PikaChoose({autoPlay:false});
                });

        });
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

it doesnt work but this next work why is that what is the diference between thoses

function handleFileSelect(evt)
{
    var files = evt.target.files;
    $('#visor_zone').fadeOut(600);
    $('#visor_zone').empty();
    $.ajax(
    {
        url: '/home/visor_publicacion',
    }).done(function(msg)
        {
            $('#visor_zone').html(msg);
            for (var i = 0, f; f = files[i]; i++)
            {
                if (!f.type.match('image.*')) 
                {
                    continue;
                }
                var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                        var li = document.createElement('li');
                        li.innerHTML = ['<li><a><img ref="', e.target.result,'" src="', e.target.result,'"/></a><span>esta es la foto agregada</span></li>'].join('');
                        //li.innerHTML = ['Nombre: ', escape(theFile.name), ' || Tamanio: ', escape(theFile.size), ' bytes || type: ', escape(theFile.type), '<br /><img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/><br />'].join('');
                        document.getElementById('pikame').appendChild(li);
                    };
                })(f);
                reader.readAsDataURL(f);
            }
            $('#visor_zone').fadeIn(600,function()
                {
                    $("#pikame").PikaChoose({autoPlay:false});
                });

        });
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

var html=msg;

The reason of failure of first one is calling javascript on methods on string which requires to be executed on DOM

var html=msg; has html in string not dom so you can not execute javascript method on it which work on DOM

$('#visor_zone').html(msg);

The reason for the success of second one is the above statement, recevived msg string is assigned to dom as html of visor_zone element, which makes it possible for javascript methods to work on received messsage html (which became part of DOM)