<li>元素不能使用javascript動態創建

Question

我正在嘗試上傳多個文件，甚至我也正在獲取多個文件。

但是我試圖逐行顯示那些選定的文件，因此我正在使用標簽，但無法創建這是我的代碼

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

我越來越喜歡

file1.txt file12.txt

但我期待這樣的輸出

FILE1.TXT

FILE2.TXT

請告訴我哪里錯了？

為什么我無法創建<li> dynamicall，還有其他方法嗎？

Answer 1

好像您將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>';
})();

的jsfiddle

Answer 2

正如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>