如何使用 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 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 input1 = document.createElement('input');

        input.id='checkbox'+counter;

        input.type = 'checkbox';

        div.appendChild(input1);

        

        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.")

    }

}

<button onclick="addElements()">

Click me

</button>