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

我总是习惯使用 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>

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

我知道如何使用 jquery 或原型框架来做到这一点，但不幸的是我不能为此使用任何框架。有谁知道如何做到这一点。我会发布为此完成的代码 iv，但我什至不知道从哪里开始。

您可以使用innerHTML属性来添加内容。添加一个id="wrapper" to the div围绕你的span元素然后你可以做

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

当然你不需要id并且可以使用其他 DOM 方法来访问div，但我发现使用id更简单、更干净。这是一个快速fiddle http://jsfiddle.net/2t9Dh/

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