`
jdw
  • 浏览: 162476 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript动态创建控件

    博客分类:
  • web
阅读更多
<html>

<head>

<title></title>
<script language="javascript" type="text/javascript">
function createElement(tagName, type)
{
   
var element = null;
   
try
   
{
      element 
= document.createElement('<+ tagName + ' name="'+name+'" />');
      element.type 
= type;
      element.value 
= value;
   }

   
catch (e)
   
{
   }

   
if ( ! element)
   
{
      element 
= document.createElement(tagName);
      element.setAttribute(
"type", type);
   }

   
return element;
}



function add()
{
    
var input1 = createElement("input","file");
    
var br = document.createElement("<br />");
    
var files = document.getElementById("files");
    files.appendChild(br);
    files.appendChild(input1);
}

</script>
</head>

<body>
<input type="button" value="add" onclick="add();"/>
<div id="files">
<input type="file"/>
</div>
</body>

</html>


延伸一下,动态创建input任意元素代码片段如下即可:

function createElement(tagName,name,type,value)
{
    
var element = null;
    
try 
    
{
        element 
= document.createElement('<'+tagName+' name="'+name+'" />');
        element.type 
= type;
        element.value 
= value;
    }

    
catch (e)
    
{
    }

    
if (!element)
    
{
        element 
= document.createElement(tagName);
        element.setAttribute(
"type",type);
        element.setAttribute(
"name",name);
        element.setAttribute(
"value",value);
   }

   
return element;
}
 
分享到:
评论

相关推荐

    dorado 7 前端页面js动态创建控件 demo代码

    在Dorado 7中,前端页面的开发常常涉及到JavaScript动态创建控件的场景。Dorado是一个功能强大的企业级UI框架,它提供了丰富的组件库和强大的数据绑定能力,使得开发者能够构建出交互性强、用户体验良好的Web应用。...

    动态创建控件的源代码资源

    在编程领域,动态创建控件是一项重要的技能,尤其是在开发用户界面丰富的应用程序时。动态创建控件允许程序员在程序运行时根据需要创建、修改或删除控件,而不是在设计时静态地将它们添加到界面上。这为应用程序提供...

    动态创建不同的控件资源

    此外,动态创建控件不只是局限于.NET Framework,其他编程环境如Java的Swing或JavaFX,或者是Web开发中的JavaScript和HTML5,也有类似的概念和实现方式。无论哪种情况,理解动态创建控件的核心原理和步骤,都将对...

    javascript 日期时间控件

    - **日历展示**:可以创建一个二维数组来表示日历格子,并根据月份和年份动态填充。 - **事件处理**:添加点击事件监听器到日历的每一天,当用户点击时,更新选定日期并可能触发其他业务逻辑。 - **时间选择**:可能...

    javascript 创建日历控件

    总的来说,JavaScript创建的日历控件可以极大地增强用户体验,而My97DatePicker等库则提供了便捷的方式来实现这一功能,减少了开发时间和复杂性。通过深入理解和实践这些技术,你可以创建出符合需求的自定义日历组件...

    JavaScript动态生成控件赋事件

    在网页中,我们经常需要动态生成控件并为其赋予事件,这在JavaScript中是一项基本但至关重要的技能。这篇博客文章可能详细阐述了如何通过JavaScript实现这一功能。 动态生成控件通常涉及到DOM(Document Object ...

    flash和javascript统计图控件

    通过ASP.NET,开发者可以轻松地将动态数据流与前端的Flash或JavaScript控件集成,实现数据驱动的图表。ASP.NET提供了多种方法来与前端交互,如AJAX(异步JavaScript和XML)和Web服务,这使得图表可以实时更新,响应...

    javascript控件开发之动态加载

    JavaScript控件开发是一种常见的Web应用开发技术,它允许开发者创建交互性强、功能丰富的用户界面元素。动态加载作为JavaScript控件开发中的一个重要概念,是提升网页性能和用户体验的关键手段。动态加载意味着控件...

    javascript树形控件

    1. 手动实现:开发者可以利用原生JavaScript编写事件处理程序,通过DOM API动态创建和修改节点。这需要对JavaScript和DOM有较深的理解,同时代码量较大,维护困难。 2. 使用库:许多流行的JavaScript库,如jQuery、...

    js(javascript) 日期控件

    5. **DOM操作**:日期控件通常需要与HTML元素交互,如在输入框上显示日期,或在页面上动态创建日历视图。JS提供了DOM操作API,如`document.getElementById`、`document.createElement`、`element.appendChild`等,...

    javascript时间选择控件

    总的来说,JavaScript时间选择控件是Web开发中的一个重要工具,它结合了JavaScript的动态功能和CSS的视觉设计,为用户提供了一种直观且方便的方式来输入日期和时间。这个压缩包中的资源提供了一个实际应用的例子,有...

    javascript 经典tab控件

    在实际开发中,创建一个JavaScript Tab控件通常涉及以下几个关键步骤: 1. **HTML结构**:首先,我们需要构建一个基础的HTML结构,包含一组可切换的标签和对应的内容区域。每个标签都是一个链接,而内容区域则隐藏...

    javascript时间控件

    在这个场景中,"javascript时间控件"可能是指一个JavaScript库或者组件,它提供了创建自定义时间选择器的功能。 JavaScript作为客户端脚本语言,可以直接在用户的浏览器上运行,无需服务器端的支持。因此,开发...

    几个经典JavaScript控件

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和动态内容。在网页设计中,JavaScript控件是不可或缺的一部分,它们为用户提供了丰富的交互体验。以下是一些基于JavaScript的...

    javascript控件

    使用JavaScript创建控件时,要注意性能优化,避免阻塞页面加载。懒加载、事件委托等技术可以提升用户体验。 8. **无障碍性(Accessibility)**: 控件的开发不应忽视无障碍性,确保视觉障碍或其他残疾的用户也能...

    javascript开发的实用页面选项卡控件

    总的来说,JavaScript选项卡控件是企业Web应用中不可或缺的一部分,通过合理利用JavaScript的动态特性,可以实现各种定制化功能,提升用户界面的互动性和吸引力。深入理解和掌握其设计与实现原理,对于任何前端...

    基于javascript的日历控件

    JavaScript日历控件通常由HTML、CSS和JavaScript代码组成,通过DOM操作动态创建和更新页面上的日历元素。开发者可以自定义控件的样式、行为和功能,以适应不同应用场景的需求。日历控件的基本功能包括显示月份和日期...

    JavaScript日历控件 六种日历

    - JavaScript作为客户端脚本语言,可以在用户的浏览器上运行,提供动态和交互性的网页体验。日历控件通常通过JavaScript实现,因为这可以避免服务器端的额外负担,并允许用户实时操作。 2. **日历样式**: - ...

    JavaScript 时间日历控件

    JavaScript作为客户端脚本语言,允许开发者在用户浏览器上直接操作页面元素,包括创建和定制时间日历控件。 在JavaScript中实现时间日历控件,通常涉及到DOM操作、事件处理以及可能的AJAX通信。例如,My97...

    几个经典JavaScript控件下载

    在这个“几个经典JavaScript控件下载”的压缩包中,包含了几个实用的JavaScript组件,这些组件可以帮助开发者创建更加交互性和用户友好的网页。 1. **表格格式的树示例**: 树形结构在数据展示中非常常见,例如...

Global site tag (gtag.js) - Google Analytics