如何使用 javascript 函数向此 <div> 添加多个输入？

Question

对于上下文，这是我正在开发的基于 Django 的应用程序。我在 HTML 文档中使用这个脚本。当按下按钮时，它会运行以下函数。目的是创建一个元素，然后包含几个输入等等。我遇到的问题是，当我使用以下附加语句向 div 添加一个输入时，如果我尝试添加另一个输入类型（例如复选框），它会覆盖第一个输入（搜索）。如何在脚本中附加多个输入？我总共需要 3 个不同的输入。

    var counter = 1; //limits amount of transactions

    function addElements() {

        if (counter < 5) //only allows 4 additional transactions

        {

            let div = document.createElement('div');

            div.id = 'row' + counter;

            document.body.appendChild(div);

            let input = document.createElement('input');

            input.id='search'+counter;

            input.type = 'search';

            input.placeholder = 'Search by product name'

            div.appendChild(input);

            let button = document.createElement('button');

            button.id ='button'+counter;

            button.type = 'QRscan';

            button.innerText = 'QR scan'

            div.appendChild(button);

        }

        counter++

        if (counter >= 6) {

            alert("You have reached the maximum transactions.")

        }

    }

    

    addElements();

Answer 1

如果我理解正确，您只想将另一个输入附加到 div。在这种情况下，您只需添加另一个具有不同变量名称的输入（input1此处）并将其附加到 div。var counter = 1; //limits amount of transactionsfunction addElements() {&nbsp; &nbsp; if (counter < 5) //only allows 4 additional transactions&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; let div = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; div.id = 'row' + counter;&nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(div);&nbsp; &nbsp; &nbsp; &nbsp; let input = document.createElement('input');&nbsp; &nbsp; &nbsp; &nbsp; input.id='search'+counter;&nbsp; &nbsp; &nbsp; &nbsp; input.type = 'search';&nbsp; &nbsp; &nbsp; &nbsp; input.placeholder = 'Search by product name'&nbsp; &nbsp; &nbsp; &nbsp; div.appendChild(input);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; let input1 = document.createElement('input');&nbsp; &nbsp; &nbsp; &nbsp; input.id='checkbox'+counter;&nbsp; &nbsp; &nbsp; &nbsp; input.type = 'checkbox';&nbsp; &nbsp; &nbsp; &nbsp; div.appendChild(input1);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; let button = document.createElement('button');&nbsp; &nbsp; &nbsp; &nbsp; button.id ='button'+counter;&nbsp; &nbsp; &nbsp; &nbsp; button.type = 'QRscan';&nbsp; &nbsp; &nbsp; &nbsp; button.innerText = 'QR scan'&nbsp; &nbsp; &nbsp; &nbsp; div.appendChild(button);&nbsp; &nbsp; }&nbsp; &nbsp; counter++&nbsp; &nbsp; if (counter >= 6) {&nbsp; &nbsp; &nbsp; &nbsp; alert("You have reached the maximum transactions.")&nbsp; &nbsp; }}<button onclick="addElements()">Click me</button>