Javascript:element.innerHTML += "..."重置文件输入

Question

我已经开始了一个新项目，而我所做的第一件事确实很痛苦。我正在制作一个表格，一个人可以在其中上传许多“附件”。问题是当用户按下“添加附件”时，所有附件都会被重置。

代码:

        ...

        function addAttachment() {
            var list = document.getElementById("attachments");

            var index = 1;

            for(; index < 6;index++) {
                if(document.getElementById("attachment" + index) == null) {
                    break;
                } else if(document.getElementById("attachment" + index).value == "") {
                    index = -1;
                    break;
                }
            }
            if(index == 5) {
                alert ('You can only have a maximum of 5 attachments!');
            } else if(index == -1) {
                alert ('One of your attachments do not have a file in it! Put your file in there first!'); 
            } else {
                list.innerHTML += '<br /><input size="1" type="file" id="attachment' + index + '" name="attachment' + index + '"/>';
            }
        }

        ...

<li id="attachments">
           <label>Attachments:</label> (<a onclick="addAttachment()" href="#">Add an Attachment</a>)
           <br /><input size="1" type="file" id="attachment1" name="attachment1"/>
        </li>
        ...

我想我的问题是......有没有更好的方法来做到这一点？

感谢您的帮助!

Answer 1

您应该使用 DOM 和appendChild 而不是设置innerHTML

    function addAttachment() {
        var list = document.getElementById("attachments");

        var index = 1;

        for(; index < 6;index++) {
            if(document.getElementById("attachment" + index) == null) {
                break;
            } else if(document.getElementById("attachment" + index).value == "") {
                index = -1;
                break;
            }
        }
        if(index == 5) {
            alert ('You can only have a maximum of 5 attachments!');
        } else if(index == -1) {
            alert ('One of your attachments do not have a file in it! Put your file in there first!'); 
        } else {
            var br = document.createElement("br");
            var newAttachment = document.createElement("input");
            newAttachment.size = 1;
            newAttachment.type = "file";
            newAttachment.id = "attachment"+index;
            newAttachment.name = newAttachment.id;

            list.appendChild(br);
            list.appendChild(newAttachment);
        }
    }