Question

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

目前添加的文字字段确实显示，但它们显示在“添加”按钮下，它们彼此相邻而不是彼此相邻。

<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和margin等css样式。

内联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

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

1 个答案: