JQuery動(dòng)態(tài)創(chuàng)建DOM、表單元素的實(shí)現(xiàn)代碼

更新時(shí)間：2011年08月09日 19:13:37 作者：

代碼很簡(jiǎn)單，直接上代碼。別忘記引用JQuery包。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>createElement</title> 
<style type="text/css"> 
.warpper{ border:1px solid red; padding:8px;} 
</style> 
<script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script> 
<script type="text/javascript" language="javascript"> 
<!-- 
///動(dòng)態(tài)創(chuàng)建一個(gè)div 
$(function(){ 
$('<div />',{ 
id:'test', 
text:"this is a div", 
"class":"warpper", 
click:function(){ 
var text=$(this).text(); 
alert(text); 
} 
}).appendTo("body"); 
}); 
//創(chuàng)建input:text 
$(function(){ 
$('<input />',{ 
type:"text", 
val:"input text somethings...", 
name:"userName" 
}).appendTo("body"); 
}); 
//創(chuàng)建input select 
$(function(){ 
var slt=$('<select />',{name:"country" }); 
$('<option />',{ 
val:"0", 
text:"請(qǐng)選擇" 
}).appendTo(slt); 
$('<option>',{ 
val:"CN", 
text:"China", 
selected:"selected" 
}).appendTo(slt); 
$("body").append(slt); 
}); 
//創(chuàng)建radio 
$(function(){ 
$('<input />',{ 
type:"radio", 
name:"rdo", 
checked:"checked", 
val:"男" 
}).appendTo("body"); 
$('<label>',{ 
text:"男", 
}).appendTo("body"); 
$('<input />',{ 
type:"radio", 
name:"rdo", 
val:"女" 
}).appendTo("body"); 
$('<label>',{ 
text:"女" 
}).appendTo("body"); 
}); 
//creat checkbox 
$(function(){ 
$('<input />',{ 
type:"checkbox", 
name:"cbox", 
val:"1", 
checked:"checked" 
}).appendTo("body"); 
}); 
$(function(){ 
$('<input />',{ 
type:"file", 
name:"myfile" 
}).appendTo("body"); 
}); 
//--> 
</script> 
</head> 
<body> 
<form> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

使用CamanJS在Web頁(yè)面上處理圖像的技巧
CamanJs庫(kù)用于個(gè)人項(xiàng)目中進(jìn)行使用的圖形操作庫(kù)，這個(gè)庫(kù)是基于JavaScript的canvas操作庫(kù)，接下來(lái)，通過(guò)本篇文章給大家詳細(xì)介紹使用CamanJS在Web頁(yè)面上處理圖像的技巧，需要的朋友一起來(lái)學(xué)習(xí)下
2015-08-08
bootstrap data與jquery .data
最近在做項(xiàng)目的時(shí)候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家
2014-07-07
jquery判斷input值不為空的方法
這篇文章主要介紹了jquery判斷input值不為空的方法的相關(guān)資料,需要的朋友可以參考下
2016-06-06
基于jquery的文章中所有圖片width大小批量設(shè)置方法
怎么設(shè)置文章中所有圖片width大小批量設(shè)置方法？這在實(shí)際應(yīng)用中很常見(jiàn)，下面有一段示例，希望對(duì)大家有所幫助
2013-08-08
用jQuery.ajaxSetup實(shí)現(xiàn)對(duì)請(qǐng)求和響應(yīng)數(shù)據(jù)的過(guò)濾
本文主要對(duì)用jQuery.ajaxSetup實(shí)現(xiàn)對(duì)請(qǐng)求和響應(yīng)數(shù)據(jù)的過(guò)濾的過(guò)程與方法進(jìn)行詳細(xì)全面的實(shí)例講解。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示提示框的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示提示框的方法,以兩個(gè)不同實(shí)例形式分析了jQuery鼠標(biāo)滑過(guò)顯示提示框的實(shí)現(xiàn)技巧與功能代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
jquery ajax return沒(méi)有返回值的解決方法
jquery ajax return沒(méi)有返回值的解決方法，需要的朋友可以參考下。
2011-10-10
jQuery的text()方法用法分析
這篇文章主要介紹了jQuery的text()方法用法,以實(shí)例形式詳細(xì)分析了jQuery的text()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06