JQuery不会动态添加html元素

Question

我试图动态地操纵我的html页面中的元素，但我遇到了一个问题。
我曾经能够附加或删除一个元素，但突然之间我不能再做了。
我必须在这里做得不对...

<div id="multiUploaderTop"> 
    <div><input type="button" value="add more files" id="buttonAddFile1"></div> 
    <div id="multiUploaderContainer"> 
    <div><input type="file" name="attachment"/></div> 
</div> 
</div> 

以上是HTML的一部分，我想操纵。
下面是我正在运行的jquery脚本。
我在做什么错？

<script type="text/javascript"> 
$(document).ready(function(){ 
    alert("doc ready"); 
    initMultiUpload(); 
}); 

function initMultiUpload(){ 
    $("#buttonAddFile1").bind("click", function(){ 

     try{ 
      addNewFileRow(); 

     }catch(exception){ 
      alert(exception.message); 
     } 


    }); 
} 

function addNewFileRow(){ 
    try{ 
     alert("adding new file row"); 
     var container = $("#multiUploadContainer"); 
     var div = document.createElement("div"); 
     var fileInput = document.createElement("input"); 
     $(fileInput).attr("type", "file"); 
     $(fileInput).attr("name", "attachment"); 
     $(div).append(fileInput); 
     $(container).append(div); 
    }catch(ex){ 
     alsert(ex.message); 
    } 
} 
</script> 

Answer 1

你有一个拼写错误，multiUploaderContainer和multiUploadContainer

var container = $("#multiUploaderContainer"); 

演示：Fiddle

它可以简化多的

function addNewFileRow() { 
    var container = $("#multiUploaderContainer"); 
    var div = $('<div />'); 
    var fileInput = $('<input />', { 
     type: 'file', 
     name: 'attachment' 
    }).appendTo(div); 
    container.append(div); 
} 

演示：Fiddle