如何使用 JQuery 动态添加一个 div？

Question

如何使用 JQuery 动态添加一个 div？

5

我有以下的HTML代码，它展示了3个文本框和一个“添加”按钮:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <div id="line-item">
    <asp:TextBox ID="txtLineNumber" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtItemCode" runat="server"></asp:TextBox>
    <asp:ImageButton ID="imgBtnAddNewLineItem" ImageUrl="~/images/add_button.jpg" 
    runat="server" />
   </div>
   </div>
   </form>

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
   /jquery.min.js">
   </script>
   <script src="js/invoice.js" type="text/javascript"></script>
</body>
</html>

当用户点击添加按钮时，我想创建另一个带有line-item 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');
    });
});

- Xaisoft

你最新的创作无法工作。getLineItem() 返回一个包含3个文本框元素的 DIV 元素。你应该将整个对象附加到容器中。摘要：container.append(getLineItem())。 - Ropstah

3个回答

4

尝试这样做：

$(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。

- cletus

我喜欢这种方式胜过我的和其他人的，简单而清晰。 - Amr Elgarhy

Cletus是一个很好的链接器。尝试将它与我的示例结合起来，你就可以开始了 ;) - Ropstah

Cletus，这个可以用，但是行项目会在屏幕上显示然后消失。每次我点击按钮时，它还会在所有文本框中插入一个“，”。 - Xaisoft

Xaisoft，将e.preventDefault()添加到click函数中。 - SteD

1

你可以使用 .append() 方法或者 .html() 方法。

- Amr Elgarhy

当我不断添加项目时，asp.net ID会发生什么？ - Xaisoft

你需要将元素 ID 作为变量来使用。 - Amr Elgarhy

请注意：无法在客户端创建<asp:控件。您需要使用<input>标记，并使用代码后端中的Request.Form来读取Form_Load中的数据。 - jrcs3

jrcs3：我也在考虑这个问题，这真的可能吗？ - Xaisoft

我现在删除了这个例子，因为你是对的，不能在客户端创建服务器端元素。 - Amr Elgarhy

both other answers are enough - Amr Elgarhy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ropstah · Accepted Answer

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

更新2

创建一个普通按钮，如下所示：

<input type="button" id="imgBtnAddNewLineItem" value="Add lineitem" />

更新 ** 这也与评论等一起更新了.. **

（该段内容为说明本文已经进行过更新，并且包含了评论等相关信息）

//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
           P.S. - 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;
}