JqueryはDOMに追加する前にhtmlにデータを追加します

Question

私はその場でhtmlを構築していますが、DOMに追加する前にデータを追加する必要があります。私は大量の情報をループしているので、htmlを追加してから再度ループしてデータを追加するのではなく、構築しているドームに関連するデータ情報を追加したいと思います。

result.forEach(function(record) { 
html += '<div id ="' record.ID + '">test content </div> '; 

//add data to above 
}); 

私はあなたが次の行で引用符の問題を抱えているDOM

に

$(body).append(html); 
testresult.forEach(function(record) { 
    $("#" +record.ID).data(record); 
}); 

Answer 1

を追加した後、ここで別のループを行うことができます。

html += '<div id =record.testID' + '>test content </div> '; 
________^______________________^___^_____________________^ 

あなたが理由として二重引用符を使用していることを修正する必要があります文字列は'<div id =record.testID'とみなされます。

html += '<div id="'+record.testID+'">test content </div>'; 

それとも、分離された定義を使用することもできます。このことができます

$.each(result, function(index,record) { 
    var div = $('<div>test content</div>'); 

    div.attr('id', record.testID); 
    div.data('test', record.testDATA); 

    $('body').append(div); 
}) 

希望を。

var result = [{testID: 1,testDATA: 'data 1'},{testID: 2,testDATA: 'data 2'},{testID: 3,testDATA: 'data 3'}] 
 
var html=''; 
 

 
$.each(result, function(index,record) { 
 
    var div = $('<div>test content</div>'); 
 
    
 
    div.attr('id', record.testID); 
 
    div.data('test', record.testDATA); 
 
    
 
    console.log(div.data('test')); 
 
    $('body').append(div); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

の代わりにこのような何かをしようとするために一緒にあなたのHTMLを片に文字列を連結する、あなたがかもしれない方法：

result.forEach(function(record) { 
    $('.selector').append(function() { 
     var $div = $('<div></div>'); 
     $div.attr('id', record.testID).text('some text'); 

     return $div; 
    }); 
}); 

これは、各項目の新しいdiv jQueryオブジェクトを作成します結果。 recordオブジェクトを使用して、オブジェクトに属性、データ、テキストなどを追加できます。コールバックが.appendに渡されたときにDOMが追加され、新しいjquery DOMオブジェクトが返されます。

Answer 3

jQueryとそのプラグインを十分に活用できるように、jQueryを使用してhtml要素を作成しようとします。

例：

var div = $("<div></div>")   // create the element 
    .text("test content")   // change the inner text 
    .attr("id", record.testID); // set the element id 

div.appendTo("body"); 

あなたはjQueryの学習のための偉大なソースとして[http://www.w3schools.com/jquery/]をチェックアウトすることができます。