如何使用JQuery动态添加div？

我有以下html显示3个文本框和一个添加按钮：

当用户单击添加按钮时，我想创建另一个带有项目ID的div并将其放在下一行。 我创建了一个js文件，但我不知道该怎么做？

这是我到目前为止：

var itemCount = 0;

 function getLineItem(number) { var div = document.createElement('div'); $(div).attr("id", "lineitem" + number); var t1 = getTextbox("txt" + number.toString() + "1"); var t2 = getTextbox("txt" + number.toString() + "2"); var t3 = getTextbox("txt" + number.toString() + "3"); $(div).append(t1); $(div).append(t2); $(div).append(t3); return $(div); } function getTextbox(id) { var textbox = document.createElement('input'); $(textbox).attr("id", id); return $(textbox); } var lineItemCount = 0; $('#imgBtnAddNewLineItem').click(function() { lineItemCount++; $('#line-item').clone().attr('id',getLineItem(lineItemCount)).appendTo('#container'); }); }); 

Answer 1

 $(document).ready(function() { $('#imgBtnAddNewLineItem').click(function() { $('#container').append('
'); }); }); 

更新2

像这样创建一个普通的按钮：

更新 **这也更新了评论等.. **

 //Count the lineItems to make sure they are unique var lineItemCount = 0; //On document ready $(document).ready(function() { //On button click $('#imgBtnAddNewLineItem').click(function(e) { /* ADD THE FOLLOWING LINE TO PREVENT THE POSTBACK PS - Make sure you pass -e- to this function... */ e.preventDefault(); //Increase the lineitemcount lineItemCount++; //Add a new lineitem to the container, pass the lineItemCount to make sure getLineItem() can generate a unique lineItem with unique Textbox ids $(container).append(getLineItem(lineItemCount)); }); }); //Create a new DIV with Textboxes function getLineItem(number) { var div = document.createElement('div'); //Give the div a unique id div.setAttribute('id','lineitem_' + number); //pass unique values to the getTextbox() function var t1 = getTextbox('txt_' + number + '_1'); var t2 = getTextbox('txt_' + number + '_2'); var t3 = getTextbox('txt_' + number + '_3'); div.appendChild(t1); div.appendChild(t2); div.appendChild(t3); return div; } //Create a textbox, make sure the id passed to this function is unique... function getTextbox(id) { var textbox = document.createElement('input'); textbox.setAttribute('id',id); textbox.setAttribute('name',id); return textbox; } 

Answer 2

尝试这样的事情：

 $(document).ready(function() { $('#imgBtnAddNewLineItem').click(function() { var container = $("#container"); var line = $('#line-item').clone().attr("id", "line-item-2") var lineCount = container.children().length + 1; line.attr("id", line.attr("id") + "-" + lineCount); line.find(":text").each(function() { // IDs need to be unique $(this).attr("id", $(this).attr("id") + "-" + lineCount); $(this).attr("name", $(this).attr("name") + "-" + lineCount); // clear the value since we're cloning a line that may have values in it $(this).val(""); }); container.append(line); }); }); 

注意：您需要更改ID。

Answer 3

你可以使用.append（）方法或.html（）