爲什麼在javascript中添加新文件後輸入文件名不見了？

Question

在Javascript中，我每次選擇文件時自動添加一個新的輸入文件（jsfiddle）。

<script> 
    function addNewInputFile() 
    { 
     document.getElementById("inputs").innerHTML += '<input type="file" onchange="addNewInputFile()" />'; 
    } 
</script> 
<div id="inputs"> 
    <input type="file" onchange="addNewInputFile()" /> 
</div> 

它正在工作，除了在新的輸入文件被追加後消失的文件的名稱。你知道爲什麼這個名字會消失嗎？

Answer 1

當您在字符串上使用+=時，它不會附加到該字符串，它會生成一個新字符串，該字符串是以前兩個字符串的總和，然後將其存儲在原始變量中。

所以，通過這樣做，實際上是清理，然後重新填充#inputs的innerHTML，使DOM刷新，而且兩個輸入信號，你看到它完成後是兩個新投入，因此會丟棄您之前輸入的任何文件。

我會推薦使用jQuery的append()或insertAfter()方法向該div添加元素。