使用onclick按钮[duplicate]在Javascript中添加输入字段

Question

我一直习惯于使用jquery或其他javascript框架，但现在我没有框架可供使用，所以我想看看是否有人知道我如何在可能的情况下使用纯javascript实现这一点。

基本上我有一个这样的div

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

<div id="room_fileds">
    <div class='label'>Room 1:</div>
    <div class="content">
        <span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X </span>
        <span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small</span>
    </div>
</div>

我需要的一个是，当点击AddMore按钮时，我需要基本上添加更多的宽度和长度字段，或者创建一个完整的结构，就像上面包含所有div的结构，或者只是插入一个新的span标记，其中包含现有div下面的字段。

我知道如何使用jquery或原型框架，但不幸的是，我不能使用任何框架来实现这一点。有人知道怎么做吗。我会发布代码iv做了这个，但我甚至不知道从哪里开始。

Answer 1

就像这样使用innerHTML：

顺便说一句，我将divclass=“content”更改为id=“content”如果您愿意，可以添加新的id。

function add_fields() {
   var d = document.getElementById("content");

   d.innerHTML += "<br /><span>Width: <input type='text'style='width:48px;'value='' /><small>(ft)</small></span> X <span>Length: <input type='text' style='width:48px'  value='' /><small>(ft)</small</span>";
}

演示：http://jsbin.com/oxokiq/5/edit

Answer 2

不需要创建新房间？。

var room = 1;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div>';

    objTo.appendChild(divtest)
}

演示：http://jsfiddle.net/nj4N4/7/

Answer 3

您可以使用innerHTML属性添加内容。在span元素周围的div中添加一个id=“wrapper”，然后可以执行以下操作

var dummy = '<span>Label: <input type="text"><small>(ft)</small></span>\r\n';
document.getElementById('wrapper').innerHTML += dummy;      

当然，您不需要id，并且可以使用其他DOM方法来访问div，但是我发现使用id更简单明了。这是一把快速小提琴

还要注意，您不应该内联css代码，也不应该将javascript调用直接附加到DOM元素中。分离DOM、Javascript和CSS将使您的生活更轻松。