如何使用按钮多次添加文本和输入

Question

我正在创建一个网站，允许用户指定数量的输入。我希望用户能够单击一个按钮，然后会出现一个新的文本和输入框，他们可以输入。这是我当前的代码：<!-- adds new company input field everytime button is clicked -->        <input type="button" onclick="addInput()">        <span id="companyX"></span><span id="companyBoxX"></span>        <script>            var countBox = 2;            var boxName = 0;            function addInput()            {                var boxName = "Company " + countBox;                var company = document.getElementById("companyX");                company.innerHTML += boxName;                var newBreak = document.createElement('br');                company.appendChild(newBreak);                document.getElementById('companyBoxX').innerHTML+='<br/><input type="text" id="'+boxName+'" value="'+boxName+'" " /><br/>';                countBox += 1;            }        </script>目前的问题是，每次我尝试添加新文本或输入字段时，它只会附加到当前文本或输入。我希望它们并排出现在新行上。前任：Company 1: (Input Box 1)Company 2: (Input Box 2)...我对 Javascript 和 HTML 非常陌生，任何帮助将不胜感激。谢谢！

Answer 1

我相信你走在正确的道路上。看看这是否更接近您的需要。

    var countBox = 2;

var boxName = 0;

function addInput()

{

    var boxLabel = "<label>Company " + countBox + "</label>";

    var element = document.getElementById('my-content');

    var html = '<div class="row">'+boxLabel+': <input type="text" id="'+boxName+'" value="'+boxName+'" " /></div>';

    appendHtml(element, html);

    countBox += 1;

    boxName += 1;

}

function appendHtml(el, str) {

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

    div.innerHTML = str;

    while (div.children.length > 0) {

        el.appendChild(div.children[0]);

    }

}

<input type="button" onclick="addInput()" value="Add new">

<div id="my-content" class="content">

</div>

我相信这更接近您的需要？

Answer 2

您使用了正确的东西并且有点封闭...阅读代码并在有不清楚的地方添加评论。希望能帮助到你

let myButton = document.querySelector('#add-those-inputs');

myButton.addEventListener('click', event => { addInput(); });

let myPlaceholder = document.querySelector('.my-placeholder');

let addInput = function() {

    let companyInputCounter = document.querySelectorAll('.my-company-input');

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

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

    input.classList.add('my-company-input');

    input.type = 'text';

    input.value = 'Company_' + companyInputCounter.length;

    input.id = 'Company_' + companyInputCounter.length;

    inputWrapper.appendChild(input);

    myPlaceholder.appendChild(inputWrapper);

};

<input id="add-those-inputs" type="button" value="Click me to add more">

<div class="my-placeholder"></div>