jQuery，附加HTML字符串不工作

當使用下面的代碼時，我無法將HTML字符串添加到目標HTMLElement的innerHTML。我究竟做錯了什麼？有一個更好的方法嗎？jQuery，附加HTML字符串不工作

<html> 
    <head> 
     <title>Add HTML input with jQuery</title> 
     <!-- 
     * This code is meant to include the jQuery library v.1.9.1 
     * from Google API 
     --> 
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script> 
     <script> 
      $('document').ready(function(){ 
       $('#add').click(function(){ 
        var src = $('#src'); // alert(src); 
        var trgt = $('#src'); // alert(trgt); 
        var x = null; 
        var child = null; 
        var str = null; 

        if(null != src.val()){ 
         alert(1); 
         x = trgt.children().length; 

         str = '<input type="text" name="array[]" id="index' + x + '" value="' + src.val() + '" />'; 

         trgt.html().append(str); 


         src.val() = null; 
        }else{ 
         alert('src value is emppty'); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="box"> 
       <label></label> <input type="text" name="src" id="src" value="" /> <button id="add">+</button> 
       <div id="trgt"> 
       </div> 
     </div> 
    </body> 
</html>

來源

2013-12-08 Brook Julias

[Yoda條件]（http://www.codinghorror.com/blog/2012/07/new-programming-jargon.html） –