Javascript DOM脚本：创建元素并将它们放在一行上

我的页面的一些背景信息：

我有一个部分总是有一个输入字段。 下面有一个“添加”按钮，可以创建更多 输入字段。由于屏幕上只需要一个字段 后续字段伴随着一个“删除”按钮，该按钮将删除 相关的输入字段

以下是它的屏幕截图：

如您所见，带“-”的按钮放置在每个输入框之后。 我要求他们向右走。我试过了 显示：在“-”/“删除”按钮上内联显示，无效

代码：

函数addField（计数）{
如果（count就我对你的问题的理解而言，我想出了以下方法：


HTML:

<div id="inputContainer">
<div class="inputFieldWithButton">
<input type="text" />
<button onclick="addInput();">+</button>
</div>
</div>

var id = 1;
function addInput()
{
    var inputId = 'input'+id;
    document.getElementById("inputContainer").innerHTML += "<div id='"+inputId+"' class='inputFieldWithButton'><input type='text' /><button onclick='removeContainer("+inputId+")'>-</button></div>";
    id++;
}

function removeContainer(_inputId)
{
    document.getElementById(_inputId.id).remove();
}


+

JS:

<div id="inputContainer">
<div class="inputFieldWithButton">
<input type="text" />
<button onclick="addInput();">+</button>
</div>
</div>

var id = 1;
function addInput()
{
    var inputId = 'input'+id;
    document.getElementById("inputContainer").innerHTML += "<div id='"+inputId+"' class='inputFieldWithButton'><input type='text' /><button onclick='removeContainer("+inputId+")'>-</button></div>";
    id++;
}

function removeContainer(_inputId)
{
    document.getElementById(_inputId.id).remove();
}

var id=1；
函数addInput（）
{
var inputId='input'+id；
document.getElementById（“inputContainer”）.innerHTML+=“-”；
id++；
}
函数removeContainer（\u inputId）
{
document.getElementById（_inputId.id）.remove（）；
}

希望这有帮助。
您有两个选择：

将每一行包装成自己的
：

演示两个示例：
如果不显示代码，我们怎么知道你做错了什么？只有一个“+”按钮。除了第一个之外，每个输入后都应该有一个“-”。这些都是动态创建的。我如何使用DOM脚本动态执行此操作？我添加了一些JS来向您展示如何创建此结构
<input type="text"><button>-</button><br>

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

button.innerText = '-';

div.appendChild(input);
div.appendChild(button);
inputContainer.appendChild(div);