js添加与删除表单元素，在ie下正常，chromium不正常

                            <script language="javascript" type="text/javascript">
                                function add() {
                                    var file=document.createElement("<input type='file' name='detailpic[]' />");
                                    var btn=document.createElement("<input type='button' value='删除' οnclick='this.parentNode.parentNode.remove(currentTarget)' />");
                                    var newtd=document.createElement("td");
                                    var newtr=document.createElement("<tr></tr>");
                                   newtd.appendChild(file);
                                    newtd.appendChild(btn);
                                    newtr.appendChild(newtd);
                                    var filearea=document.getElementById("filearea");
                                    filearea.appendChild(newtr);
                                }
                                function clear() {
                                    removeChild(currentTarget);
                                }
                            </script>
                            <table border="0" width="100%">
                                <tbody id="filearea">
                                    <tr>
                                        <td><input type="file" name="detailpic[]" /> <input type="button" οnclick="add();" value="添加" /></td>
                                    </tr>
                                </tbody>

如果不用createElement的方式，而换成innerHtml迭加的方式，正常，但是添加file时，原来的file的路径值就消失了。

        <script language="javascript" type="text/javascript">
            var i=1;
            function append() {
                i++;
                var picarea=document.getElementById("detailPicArea");
                picarea.innerHTML+="<div id=detailpicnew"+i+"><input type='file' name='detailpic[]' /> <input type='button' οnclick='del("+i+");' value='删除' /></div>";
            }
            function del(i) {
                var parent=document.getElementById("detailPicArea");
                var detailpicnew=document.getElementById("detailpicnew"+i);
                parent.removeChild(detailpicnew);
            }
        </script>
                        <td id="detailPicArea">
                            
                            <div><input type="file" name="detailpic[]" /> <input type="button" οnclick="append();" name="btnfileadd" value="添加" /></div>
                         </td>

 

终级解决方案是用ajax上传，这样编辑修改记录时思路也更加清晰。