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>