9

我一直习惯于使用 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，但我什至不知道在哪里开始。

4

3 回答 3

15

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

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

当然，您不需要id并且可以使用其他 DOM 方法来访问div，但我发现使用ids 更容易和更清洁。这是一个快速的小提琴

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

于 2013-04-10T18:10:10.003 回答
8

不需要新建房间吗？

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/

于 2013-04-10T18:25:14.487 回答
3

只需使用innerHTML这样的：

顺便说一句，我将 div 更改class="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

于 2013-04-10T18:13:17.720 回答