Question

I have following code in jquery :

var qtype ="<select id='qtype'><option>qt1 </option><option>qt2</option></select>";
var abc ="<select id='t1'><option>Simple 1</option><option>Simple 2</option></select>";
var xyz ="<select id='t2'><option>Hard</option></select>";
var pqr ="<select id='t3'><option>Diff</option></select>";

$("#qttype").html(qtype);
var qtype=$("qttype"); 
if(qtype== "qt1"){
 $("#t1").change(function(){        
    $("#abc").change(function(){
     $("#divid").html(abc+xyz);
         $("#divid").html(abc+xyz+pqr);

 });  }

but it does not properly append element i mean when i change “simple 1” this shows second combo box with “xyz” but when I again click it show me double appended element i want to display only once when i change the combobox values.

Answer 1

If you got the element located after the position you want append, you should take a look on .before(). You can use the .after() too, although in this case you must select the previous element.

• Example:

  $("element").before("<p>this p will be added before the 'element'</p>");
  $("element").after(" <p>this p will be added after  the 'element'</p>");