文章源自：http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/
Dynamically add button, textbox, input, radio elements in html form using JavaScript
Adding Elements like textbox, button, radio button etc in a html form using JavaScript is very simple. JavaScript’s document object has a method called createElement() which can be used to create html elements dynamically.
We had used this function in our tutorial: Dynamic combobox-listbox-drop-down using javascript to add dynamic options to a combo box-listbox. Let us use this function to create textboxes, radio buttons, buttons etc dynamically and add them in our page.
Following is the source code of our example.
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/>
<SELECT name="element">
<OPTION value="button">Button</OPTION>
<OPTION value="text">Textbox</OPTION>
<OPTION value="radio">Radio</OPTION>
</SELECT>
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
<span id="fooBar"> </span>
</FORM>
</BODY>
</HTML>
Also note that we have used setAttribute() method to assign the attributes to our dynamically created element.
相关推荐
"Add Textbox Dynamically using jQuery.zip"这个压缩包中的示例，主要展示了如何利用jQuery在用户交互时动态创建一个新的文本输入框。 首先，jQuery库是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画...
在JavaScript编程中，动态创建HTML元素是一项常见的任务，特别是在构建交互式网页和Web应用程序时。这个主题，"动态创建HTML元素_Js"，涉及到如何利用JavaScript API来在页面上添加、修改或删除DOM（文档对象模型）...
- Implementing interactive elements like sliders and progress bars using HTML5 form controls. 4. **Creating Advanced Forms with HTML5** - Understanding the enhanced form controls available in HTML5...
The book explains how jQuery facilitates this separation by enabling the use of event delegation and by making it easy to add behavior to elements without hard-coding JavaScript directly into the ...
Adding/removing elements to a panel dynamically 98 Creating a tabbed user interface 100 Implementing drag-and-drop 103 Chapter 4: Using Standard Controls 109 Introduction 109 Working with text ...
The paper "Power Scaling for Cognitive Radio" discusses the concept of using cognitive radios to utilize locally unused spectrum for their own transmissions while ensuring that they do not generate ...
Practical examples are given for using fonts in different widgets, showing how to apply custom fonts to text displayed in buttons, labels, and other GUI elements. **3.4 Using Fonts Dynamically** ...
The `$("<element>")` function allows developers to generate new elements dynamically. - **Example:** `var newDiv = $("<div>").text("Hello World!");` - **Extending JQuery:** One of the most ...
标题 "Dynamically shortened Text with “Show More” link using jQuery" 涉及的是一个常见的网页交互功能，即使用jQuery库动态地缩短文本并添加“显示更多”链接。这个功能在网页设计中非常常见，特别是在内容...
With Spring DM, you can easily create highly modular applications and you can dynamically add, remove, and update your modules. Spring Dynamic Modules in Action is a comprehensive tutorial that ...
- GNURadio广泛应用于教育、科研及商业领域，尤其在动态频谱接入系统（Dynamically Spectrum Access, DSA）中具有重要意义。 #### 二、主讲人介绍 - **Tom Rondeau**：GNURadio的主要维护者和首席开发者，同时也是...
创建一个新的`Excel.Application`实例，然后使用`Workbooks.Add()`方法创建一个新工作簿。 5. **设置工作表和范围**：选取工作表（`Worksheets`集合中的元素），并定义数据范围，这将是图表的数据源。 6. **创建...
- **Transformations:** Transformations allow for manipulating the appearance and position of UI elements dynamically. #### Conclusion XAML is a powerful tool for Windows developers looking to create ...
- WPTools is configured using the file WPINC.INC, here WPREPORTER is activated and the optional WPShared, WPSPell and wPDF can be selected to be compiled into main WPTools package. - also see FAQ:...
winhole.zip This example demonstrates how to put a hole in the center of a form.<END><br>15 , tileform.zip This will tile a picture on the background of your form.<END><br>16 , radiomnu.zip ...
Identify the high level steps such as verifying user input, using command lines and conditional statements in creating and executing simple shell scripts Create and edit dynamic shell scripts to ...