通过javascript添加HTML控件 [英] Add HTML control(s) via javascript

问题描述

有些东西让我望而却步...似乎很明显，但是我不太明白。

Something is eluding me ... it seems obvious, but I can't quite figure it out.

我想添加/删除几个HTML控件用户更改下拉列表的值时转到页面（纯旧html）。一个示例是为所请求的每个房间（数量）添加或删除此房间中的客人数量文本框...

I want to add/remove a couple of HTML controls to a page (plain old html) when a user changes value of a dropdown list. An example is to add or remove a "number of guests in this room" textbox for each (of a number) of rooms requested ...

因此，如果用户选择：

1个房间，有一个文本框

1 room, there is one text box

2个房间，有两个文本框

2 rooms, there are two text boxes

3个房间，三个文本框

3 rooms, three text boxes

返回2个房间，两个文本框

back to 2 rooms, two text boxes

等等...

推荐答案

使用直接的DOM和Javascript，您需要修改InnterHtml属性包含文本框的DOM对象的图片...很可能是div。因此它看起来像这样：

Using straight DOM and Javascript you would want to modify the InnterHtml property of a DOM object which will contain the text boxes...most likely a div. So it would look something like:

var container = document.getElementById("myContainerDiv");
var html;
for(var i = 0; i < selectedRooms; i++)
{
    html = html + "<input type=text ... /><br />";
}
container.innerHtml = html;

使用类似jQuery的Javascript库可以使事情变得简单一些：

Using a Javascript library like jQuery could make things slightly easier:

var html;
for(var i = 0; i < selectedRooms; i++)
{
    html = html + "<input type=text ... /><br />";
}

$("#myContainerDiv").append(html);

这篇关于通过javascript添加HTML控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！