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

【问题标题】：How can I add multiple inputs to this <div> using javascript function?如何使用 javascript 函数向此 <div> 添加多个输入？
【发布时间】：2020-06-18 03:14:31
【问题描述】：

对于上下文，这是我正在开发的基于 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();

【问题讨论】：

添加非搜索类型输入的代码在哪里？
这段代码工作正常，所以问题一定出在添加其他输入的函数上。
嘿@Austin Hallett 我尝试在浏览器控制台中运行您的代码，它运行正常。我觉得您触发该功能的部分存在一些问题。正如您编写的那样，代码本身确实向正文添加了一个输入字段和一个按钮。

标签： javascript html

【解决方案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>

【讨论】：