ループでdivタグ内にテキストボックスを動的に追加する方法

Question

ajax呼び出し（varデータ）の成功関数からのデータを、以下のコードのように動的にテキストボックスに追加したいとします。 divタグ内に各テキストボックスを追加する必要があります。 forループのdivタグ内に各テキストボックスを追加する方法を教えてください。

$.ajax({ 
    type: 'POST', 
    url: 'GRNgetItem.php', 
    data: postForm1, 
    //dataType: 'json', 
    success: function (data) { 
     var container = document.getElementById('item'); 
     // var container = document.getElementById('item_Name'); 
     var dd = data; 
     var data = (typeof dd) == 'string' ? eval('(' + dd + ')') : dd; 
     for (var i = 0; i < data.length; i++) { 
      var txtItemId = document.createElement('input'); 
      txtItemId.type = 'text'; 
      txtItemId.id = 'ItemId_' + i; // Set id based on "i" value 
      txtItemId.name='ItemId[]'; 
      txtItemId.class='col-md-2'; 
      txtItemId.value=data[i].ItemId; 
      container.appendChild(txtItemId);   
      var txtItemName = document.createElement('input'); 
      txtItemName.type = 'text'; 
      txtItemName.id = 'ItemName_' + i; // Set id based on "i" value 
      txtItemId.name='ItemName[]'; 
      txtItemName.class='col-md-2'; 
      txtItemName.value=data[i].ItemName; 
      container.appendChild(txtItemName);  
      var txtItemQty = document.createElement('input'); 
      txtItemQty.type = 'text'; 
      txtItemQty.id = 'ItemQty_' + i; // Set id based on "i" value 
      txtItemId.name='ItemQty[]'; 
      txtItemQty.class='col-md-2'; 
      txtItemQty.value=data[i].Qty; 
      container.appendChild(txtItemQty); 
      var txtItemRPrice= document.createElement('input'); 
      txtItemRPrice.type = 'text'; 
      txtItemRPrice.id = 'ItemPrice_' + i; // Set id based on "i" value 
      txtItemId.name='ItemPrice[]'; 
      txtItemRPrice.class='col-md-2'; 
      txtItemRPrice.value=""; 
      container.appendChild(txtItemRPrice); 
     }  
    } 
}); 

Answer 1

これはあなたにDIVタグ内textboxが表示されます。このJavascriptを

var container = document.getElementById('item'); 
var div = document.createElement('div'); 
var txtItemId = document.createElement('input'); 
txtItemId.type = 'text'; 
txtItemId.id = 'ItemId_' ; 
txtItemId.name='ItemId[]'; 
txtItemId.class='col-md-2'; 
txtItemId.value=1; 
div.appendChild(txtItemId); 

console.log(container.appendChild(div)) 

で試してみてください。それに応じて他のスクリプトを変更する