javascript - div 后面包含动态元素的按钮，无需触摸 HTML

Question

我需要帮助。我有这段代码，我必须将“保存”按钮放在末尾才能将更改或新条目存储在数据库中。我有一个问题，我不知道如何在不更改 HTML 代码的情况下将按钮放在最后，因为我不能，我会通过 javascript 插入按钮，我能怎么做？p.s:问题是我无法插入这些函数，因为每次按下按钮时都会调用这里的函数，如果按下另一次则调用另一个，然后再一次。p.s2:告诉我代码是否可以，否则告诉我如何改进谢谢

$().ready(function() {

  //Creation of array to simulate data from DB
  var obj1 = 
  {
    id: "1",
    name: "Bryan",
    surname: "Del Bianco"
  };
  
  var obj2 = 
  {
    id: "2",
    name: "Luca",
    surname: "Del Bianco"
  };
  
  var exampleOfDatabase = new Array();
  exampleOfDatabase.push(obj1);
  exampleOfDatabase.push(obj2)


  visualizzaModifica(exampleOfDatabase, $("#divTeamLeaderProduzione"))

  function visualizzaModifica(array, div)
  {
    div.html("");
    div.append("<br>");

    let i = 1;

    array.forEach(function(e) {
      div.append(
        "<div id='div" + i + "' class='input-group'>" +
        "<input type='text' id='inputModificaNome" + i + "' class='form-control'                                    value='" + e.name + "'>" +

        "<input type='text' id='inputModificaCellulare" + i + "' class='form-control'                                value='" + e.surname + "'>" +
        "</div>"
      );

      i++;
    });

    aggiungiInput(i, div);

  }
  
  function aggiungiInput(i,div)
    {
        if($("#div"+i).length == 0)
        {
            var next = $("<div>",
                {
                    id: 'div'+i,
                    class: 'input-group'
                });

            var inputNome = $('<input>',
                {
                    id: 'inputModificaNome'+i,
                    type: 'text',
                    class: 'form-control'
                });

            var inputCellulare = $('<input>',
                {
                    id: "inputModificaCellulare"+i,
                    type: 'text',
                    class: 'form-control'
                });

            next.on('change', function ()
            {
               aggiungiInput(i+1, div);
            });

            next.append(inputNome);
            next.append(inputCellulare);
            div.append(next);
        }
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divTeamLeaderProduzione">

</div>

Answer 1

$().ready(function() {

  //Creation of array to simulate data from DB
  var obj1 = 
  {
    id: "1",
    name: "Bryan",
    surname: "Del Bianco"
  };
  
  var obj2 = 
  {
    id: "2",
    name: "Luca",
    surname: "Del Bianco"
  };
  
  var exampleOfDatabase = new Array();
  exampleOfDatabase.push(obj1);
  exampleOfDatabase.push(obj2)


  visualizzaModifica(exampleOfDatabase, $("#divTeamLeaderProduzione"))

  function visualizzaModifica(array, div)
  {
    div.html("");
    div.append("<br>");

    let i = 1;

    array.forEach(function(e) {
      div.append(
        "<div id='div" + i + "' class='input-group'>" +
        "<input type='text' id='inputModificaNome" + i + "' class='form-control'                                    value='" + e.name + "'>" +

        "<input type='text' id='inputModificaCellulare" + i + "' class='form-control'                                value='" + e.surname + "'>" +
        "</div>"
      );

      i++;
    });

    aggiungiInput(i, div);
  }
  
  function aggiungiInput(i,div)
    {
        if($("#div"+i).length == 0)
        {
            var next = $("<div>",
                {
                    id: 'div'+i,
                    class: 'input-group'
                });

            var inputNome = $('<input>',
                {
                    id: 'inputModificaNome'+i,
                    type: 'text',
                    class: 'form-control'
                });

            var inputCellulare = $('<input>',
                {
                    id: "inputModificaCellulare"+i,
                    type: 'text',
                    class: 'form-control'
                });

            next.on('change', function ()
            {
               aggiungiInput(i+1, div);
            });

            next.append(inputNome);
            next.append(inputCellulare);
            div.append(next);
        }
        $("#btnSave").remove();
        div.append("<input type='button' value='Save' id='btnSave' />");
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divTeamLeaderProduzione">

</div> 

我删除了该按钮并在需要时放置它。希望能帮助到你。干杯..!!