Javascript / CSS 如何制作具有不同数据的多个 div 元素并输入到同一个输入表单中

Question

如何通过输入表单（使用按钮）创建一个新的 div 一个 div 与最后输入的数据一起出现？

我想用输入表单中的数据创建一个新的 div。 接下来我想使用相同的方法创建一个新的 div。 但是仅对第一个 div 使用新数据记录，而我创建的另一个 div 没有任何数据。

我如何着手制作新输入 = 来自该输入的新 div+新数据&

let infoData = {
    budget: 0,
    expenses: 0,
    balance: 0,
    expenseObj: {
        name: "",
        amount: 0
    },
    budgetSubmit: function() {
        infoData.budget = parseInt(document.getElementById('budget-input').value);
        budgetAmount = infoData.budget;
        document.getElementById('budget-amount').innerHTML=budgetAmount;
    },
    expenseSubmit: function() {
        infoData.expenses = parseInt(document.getElementById('expense-input').value);
        expenseName = document.getElementById('expense-name').value;
        infoData.expenseObj.name = expenseName;
        expenseAmount = infoData.expenses;
        infoData.expenseObj.amount = expenseAmount;
        document.getElementById('expense-amount').innerHTML=expenseAmount;
    },
    balanceSubmit: function() {
        infoData.balance = infoData.budget;
        balanceAmount = infoData.balance;
        document.getElementById('balance-amount').innerHTML=balanceAmount;
    } 
}

calcBtn.addEventListener('click', function() {
    infoData.budgetSubmit();
    infoData.balanceSubmit();
});

addExpBtn.addEventListener('click', function() {
    infoData.expenseSubmit();
});

addExpBtn.addEventListener('click', function(event) {
    balanceAmount = balanceAmount - expenseAmount;
    document.getElementById('balance-amount').innerHTML=balanceAmount;
});

let divEvent = document.getElementById('expense-row');

if (typeof(divEvent) !== "undefined") {
    addExpBtn.addEventListener('click', function(event) {
        const divExpense = document.createElement('div');

        divExpense.className = 'div-expense';

        divExpense.innerHTML = `
        <p>
            <b class="text-uppercase">name: </b><span id="div-expense-name">Name</span>
        </p>
        <p>
            <b class="text-uppercase">amount: </b><span id="div-expense-amount">0</span>₴
        </p>
        <p>
            <span id="div-expense-delete">Delete</span>
        </p>`;

        document.getElementById('expense-row').appendChild(divExpense);
        document.getElementById('div-expense-name').innerHTML=infoData.expenseObj.name;
        document.getElementById('div-expense-amount').innerHTML=infoData.expenseObj.amount;
    });
}

Answer 1

您必须在按下按钮时创建 div，您可以这样做：

    $("button").click(function(){
      const newDiv = document.createElement("div");
      const newDivText = document.createTextNode("");
      $(newDivText).append($("input").val());
      $(newDiv).append(newDivText);
      $(document).append(newDiv);
    });

我认为这就是你所追求的。 如果您需要任何解释，请告诉我。

Answer 2

 function addDiv(event){ event.preventDefault(); var input= document.getElementsByTagName("input")[0]; var div = document.createElement('div'); div.innerHTML = input.value; document.body.appendChild(div); input.value=''; }

 <form action ="#"> <input type=text/> <button onclick='addDiv(event)'type='submit'>Submit</button> </form>