<；李>；无法使用javascript动态创建元素

我试图上传多个文件，甚至我也得到多个文件

但我正试图一行一行地显示这些选定的文件，所以我使用标记，但我无法创建，这是我的代码

    <script type="text/javascript">
                        window.onload = function() {
                            var fileInput = document.getElementById('fileInput');

                            fileInput.addEventListener('change', function(e) {
                                var file1 = fileInput.files;
                                var output = [];
                                for(var i=0,f;f=file1[i];i++){
                                    output.push('<li>'+f.name+'</li>');
                                    alert(f.name);
                                    document.getElementById('list').innerHTML = '<ul>'+output+'</ul>';
                                }
                            });
                        }
                        </script>


                                <input type="file" id="fileInput" multiple="multiple" >
                                <p id="list"></p>

window.onload=函数（）{
var fileInput=document.getElementById（'fileInput'）；
fileInput.addEventListener（'change'，函数（e）{
var file1=fileInput.files；
var输出=[]；
for（变量i=0，f；f=file1[i]；i++）{
output.push（“
”+f.name+“
”）；
警报（f.name）；
document.getElementById（'list'）.innerHTML='
'+output+'
'；
}
});
}

我越来越像这样了

file1.txt file12.txt

但我期待这样的结果

file1.txt

file2.txt

请告诉我哪里错了

---

为什么我无法创建dynamiccall？还有其他方法吗？

看起来您将innerHTML设置在循环内部而不是外部。另外，

output

是一个数组，而不是字符串

(function() {
    "use strict";

    var files  = [{'name':'file1'}, {'name': 'file2'}],
        output = '',
        i;

    for (i = 0; i < files.length; i++) {
        output += '<li>' + files[i].name + '</li>';
    }

    document.getElementById('list').innerHTML = '<ul>' + output + '</ul>';
})();

（函数（）{
“严格使用”；
var files=[{'name'：'file1'}，{'name'：'file2'}]，
输出=“”，
我
对于（i=0；i'；
}
document.getElementById（'list'）.innerHTML='
'+output+'
'；
})();

---

正如gpojd提到的，重置输出是在错误的循环中，将其设置为字符串可能更好。我认为这是可行的：

 <script type="text/javascript">
                    window.onload = function() {
                        var fileInput = document.getElementById('fileInput');
                        var output = "";

                        fileInput.addEventListener('change', function(e) {
                            var file1 = fileInput.files;

                            for(var i=0,f;f=file1[i];i++){
                                output += '<li>'+f.name+'</li>';
                                alert(f.name);
                                document.getElementById('list').innerHTML = '<ul>'+output+'</ul>';
                            }
                        });
                    }
                    </script>

window.onload=函数（）{
var fileInput=document.getElementById（'fileInput'）；
var输出=”；
fileInput.addEventListener（'change'，函数（e）{
var file1=fileInput.files；
for（变量i=0，f；f=file1[i]；i++）{
输出+='
'+f.name+'
'；
警报（f.name）；
document.getElementById（'list'）.innerHTML='
'+output+'
'；
}
});
}

这是最简单的方法。我建议使用适当的DOM函数

document.createElement（）

和

Node.appendChild（）

，而不是写入innerHTML。更少出错，更灵活。