Javascript / CSS Как создать несколько элементов div с разными данными, которые вводятся в одну форму ввода

Question

Как создать новый div с помощью формы ввода (с помощью кнопки), где появляется div с данными, которые были введены последними?

Я хочу создать новый div с данные из формы ввода. Далее я хочу создать новый div, используя тот же. Но использование новой записи данных только для первого div и другого, который я создал div, не имеет никаких данных.

Как мне go сделать новый ввод = новый 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>