javascript - 如何在ajax获取函数(msg)中追加子项？

Question

我有这个代码函数，我试图获取一个html并将li附加到msg中收到的html中，但不起作用

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);

它不起作用，但接下来的工作为什么是那些之间的区别是什么

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;

第一个失败的原因是在需要在 DOM 上执行的字符串方法上调用 javascript

var html=msg; 在字符串中包含 html，而不是 dom，因此您无法在其上执行在 DOM 上工作的 javascript 方法

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

第二个成功的原因是上面的语句，接收到的消息字符串作为visor_zone元素的html分配给dom，这使得javascript方法可以处理接收到的消息html(成为 DOM 的一部分)