jQuery在将数据添加到DOM之前将数据添加到html

Question

I am building html on the fly need to add data before I add it to DOM. Since I am looping thru' lot of information, I would like to add the relevant data info along with the dom I am building instead of adding the html and then looping thru again to add the data.

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

//add data to above
 });

I can do another loop here after adding it to DOM

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

Answer 1

You have quotes problem in the following line :

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

You should fix that using double quotes because as it's now the string will be considered as '<div id =record.testID' .

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

Or you could use separated definition :

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

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

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

Hope this helps.

 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

Instead of concatenating strings to piece together your HTML, you may way to try something like this:

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

        return $div;
    });
 });

This creates a new div jquery object for each item in result. You can use the record object to add attributes, data, text, etc to you object. It will be added the DOM when the callback passed into .append returns your new jquery DOM object.

Answer 3

Start trying to use jQuery to create your html elements so you can take fully advantage of jQuery and its plugins.

Ex:

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");

You can check out [ http://www.w3schools.com/jquery/] as a great source for learning jQuery.