Jquery add html element to div after loop, weird behavior

Question

Here is the code:

$('#date').append( '<select id="date">'+ '<option value="0">- - SELECT - -</option>'); for(var i in data){ $('#date').append( '<option value="">'+data[i]['date_time']+'</option>'); }); $('#date').append('</select>'); 

</select> always added above for the loop. If I replace it with just a job choice, for example, it is added at the end where it should be. Why is this happening and how can I fix it?

Answer 1

I believe jQuery will generate the DOM as follows:

 <div id="date"> <select id="date"> <option value="0">- - SELECT - -</option> </select> <option value="">foo</option> <option value="">bar</option> etc... </div> 

Since it automatically closes <select> after the first .append() . What you do after this adds options to the <div id="#date"/> , not the <select> that were added. I don’t think that the final closure </select> will be real either.

If you really want to use append, the following JavaScript will add options to the correct node:

 // dummy data object for example var data = new Array(new Array(), new Array()); data[0].date_time = 2011; data[1].date_time = 2012; var options = new Array(); $.each(data, function(index, option) { options.push('<option value="' + index + '">'+ option.date_time +'</option>'); }); $('<select id="date"/>').append(options.join('')).appendTo('#date'); 

Assuming existing HTML:

 <div id="date"></div> 

However, this imposes overhead, since the addition occurs twice. A faster approach is to create parameter markup, as ShankarSangoli already answered

Answer 2

This is not the right way to dynamically create html. You have to create full markup right away by putting it in an array and then providing it with jQuery . try it

 var html = []; html.push('<select id="date">'); html.push('<option value="0">- - SELECT - -</option>'); for(var i in data){ html.push('<option value="">'+data[i]['date_time']+'</option>'); } html.push('</select>'); //This selector should be some container like dateContainer //because you have already give date as id to the above select element $('#dateContainer').html(html.join('')); 

Answer 3

 $('#date').append($("<select/>", { name: "name"+i}) .find('select') .append($("<option/>", { value: "abc"+i}).text('cell')) .append($("<option/>", { value: "abc"+i}).text('home')) .append($("<option/>", { value: "abc"+i}).text('work')); 

all options must be inserted inside select

Answer 4

If you want to do this in your way, create, for example, a string variable with html code in it and add it.

 data = [1, 2, 3]; var html = '<select id="date">'+ '<option value="0">- - SELECT - -</option>'; for(var i in data){ html += '<option value="">'+data[i]+'</option>'; } $('#date').append(html) 

or look here What is the best way to add options to a selection from an array using jQuery?

ps: the first application tries to create a valid DOM structure inside the document by automatically closing the select tag. therefore, the second will not insert options into the created selection.

another possible way based on the link above

 var sel = $('<select id="date">'); $.each(data, function(key, value) { sel.append($('<option>').text(key['date_time'])); }); $('#date').append(sel); 

Answer 5

I assume that the basic HTML code looks something like this:

 <div id="date"></div> 

then after the first $('#date').append('<select id="date">... in your code you will have the following:

 <div id="date"><select id="date">...</div> 

which is 2 elements with the same identifier attribute.

The ID attribute is similar to highlanders, there should be only one of them (on each page).

seccond $('#date').append... works unexpectedly, and the third, also unexpectedly, does not work. Because you cannot predict which #date they refer to.

Also, as other answers say, it would be better if you build it for only 1 append, because calling selectors so many times (especially inside the loop) is a performance hit.