Html 使用onclick按钮在Javascript中添加输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15933037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding input fields in Javascript with onclick button
提问by Yeak
Im always used to using jquery or other javascript frameworks but right now I have no frameworks to use so i wanted to see if anyone knows how i can do this in straight javascript if possible.
我总是习惯于使用 jquery 或其他 javascript 框架，但现在我没有框架可以使用，所以我想看看是否有人知道我如何在可能的情况下直接使用 javascript 来做到这一点。
Basically i have a div like this
基本上我有一个这样的 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>
What i need one is when the add more button is clicked i need to basically add more width and length fields either creating a entire structure like the one above with all the divs or just inserting new span tag with the fields below the existing ones.
我需要的是，当单击添加更多按钮时，我需要基本上添加更多的宽度和长度字段，或者创建一个完整的结构，如上面带有所有 div 的结构，或者只是插入带有现有字段下方的字段的新 span 标签。
I know how to do it with jquery or prototype framework but unfortunatley I cannot use any frameworks for this. Does anyone have any idea how to do it. I would post code iv done for this but I dont even know where to beging.
我知道如何使用 jquery 或原型框架来做到这一点，但不幸的是我不能为此使用任何框架。有没有人知道怎么做。我会发布为此所做的代码iv，但我什至不知道该从哪里开始。
回答by Ingo Bürk
You can use the innerHTMLproperty to add content. Add a id="wrapper"to the divsurrounding your spanelements and then you can do
您可以使用该innerHTML属性添加内容。id="wrapper"在div你的span元素周围添加一个，然后你可以做
var dummy = '<span>Label: <input type="text"><small>(ft)</small></span>\r\n';
document.getElementById('wrapper').innerHTML += dummy;
Of course you don't need the idand can use other DOM methods to get to the div, but I find using ids easier and cleaner. Here's a quick fiddle
当然，您不需要id并且可以使用其他 DOM 方法来访问div，但我发现使用ids 更简单、更干净。这是一个快速的小提琴
Also note that you shouldn't inline your css code, neither attach your javascript calls directly inside the DOM elements. Separating DOM, Javascript and CSS will make your life easier.
另请注意，您不应内联 css 代码，也不应将 javascript 调用直接附加到 DOM 元素中。分离 DOM、Javascript 和 CSS 将使您的生活更轻松。
回答by Felix
Don't need create new room?.
不需要创建新房间？。
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)
}
回答by Prakash Chennupati
just use the innerHTMLlike this:
只需使用innerHTML这样的：
btw I changed div class="content"to id="content"you can add new id if you prefer.
顺便说一句，如果您愿意，我将 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>";
}
