創建元素不工作在jQuery 1.8.3

Question

我已經使用jquery 1.8.3動態創建元素。但它不適用於此。但它正在使用1.3.2版本。以下是我用於此的My JQuery代碼。

$(document).ready(function(){ 

     var counter = 2; 

     $("#addButton").click(function() { 

     if(counter>10){ 
       alert("Only 10 textboxes allow"); 
       return false; 
     } 

     var newTextBoxDiv = $(document.createElement('div')) 
      .attr("id", 'CallBackDiv' + counter); 

     newTextBoxDiv.after().html('<label>Call Back Date Time #'+ counter + ': </label>'+ 
       '<div class="controls"><input type="text" name="callback' + counter + 
       '" id="callback' + counter + '" value="" ></div>'); 

     newTextBoxDiv.appendTo("#control-group"); 


     counter++; 
     }); 

     $("#removeButton").click(function() { 
     if(counter==1){ 
       alert("No more textbox to remove"); 
       return false; 
      } 

     counter--; 

      $("#CallBackDiv" + counter).remove(); 

     }); 

     $("#getButtonValue").click(function() { 

     var msg = ''; 
     for(i=1; i<counter; i++){ 
      msg += "\n CallBack #" + i + " : " + $('#callback' + i).val(); 
     } 
       alert(msg); 
     }); 
     }); 

---

<div id='control-group'> 
    <div id="CallBackDiv1"> 
<label class="control-label" for="input01"> 
Call Back Date Time #1:</label><div class="controls"> 
<input type='textbox' id='callback1' ></div> 
    </div> 
</div> 
<input type='button' value='+' id='addButton'> 
<input type='button' value='-' id='removeButton'> 

Answer 1

使用jQuery你可以動態創建單元這樣做：

// Create a new div 
var newTextBoxDiv = $('<div/>', { 
    id: 'CallBackDiv' + counter 
});  

// Append the new element to the DOM 
newTextBoxDiv.appendTo("#control-group"); 

// You can check the console for the 'newTextBoxDiv' id 
console.log(newTextBoxDiv.attr('id')); 

// Then call the after part 
newTextBoxDiv.after().html('...'); 

FIDDLE DEMO

Answer 2

沒有什麼錯，你所創建的div的方式。您的代碼的問題是您使用jQuery的after()函數。在新創建的元素上調用after()將返回null，然後調用html()方法。我建議你如何使用after()功能閱讀起來 - >http://api.jquery.com/after/

Answer 3

你爲什麼不以純JS

var newTextBoxDiv = document.createElement('div'); 
newTextBoxDiv.setAttribute("id", 'CallBackDiv' + counter);