javascript - 使用javascript单击按钮添加文本字段

Question

下面是我项目中当前拥有的 javascript 和 html。我想要一个看起来与 html 代码中的第一个相同的文本输入字段，在单击“添加”按钮后出现在它的正下方。

目前添加的文本字段确实出现了，但它们出现在“添加”按钮下方，并且彼此相邻出现，而不是彼此下方。

<script>    
    function add_field() 
    {
        var form = document.getElementsByTagName('form')[0],
        input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('name', 'item');
        form.appendChild(input);
    };
</script>
<form name="input" method="get">
    <div class="ui-input-text">
        <input type="text" name="item"><br>
        <div data-role="navbar">
            <button type="button" onclick="add_field()">ADD</button><br>
        </div>
    </div>
</form>

Answer 1

这是一个简单的演示，可以实现您正在寻找的内容:

<form name="input" method="get">
  <input type="text" name="item">
</form>
<button type="button" onclick="add_field()">ADD</button>

CSS:

input {
  display: block;
}

一些有用的注释:

不要使用 <br>用于间隔元素。相反，使用像 display: block 这样的 css 样式和 margin .

内联 js(如 html 中的 onlick)可能会产生一些令人讨厌的副作用，并且由于很多原因并不是一个好的做法，请阅读其中的一些结果:https://www.google.com/search?q=Why+is+inline+js+bad%3F

您可以这样做，而不是内联 js:

//get button reference
var myBtn = document.getElementById('myBtn');

//add click function
myBtn.addEventListener('click', function(event) {
  addField();
});

你有一些 div表单中在表单外部关闭的标签。如果一个元素开始于另一个元素内部，请确保在关闭父元素之前将其关闭。

这是所有这些的演示:http://jsbin.com/igoVoTEr/1/edit

如果您需要按钮位于表单内部，您可以在它之前插入输入，如下所示:

function addField() {
  var input = document.createElement('input');
  //insert before the button
  form.insertBefore(input, myBtn);
}

现场演示:http://jsbin.com/igoVoTEr/2/edit