JQuery動(dòng)態(tài)創(chuàng)建DOM、表單元素的實(shí)現(xiàn)代碼
更新時(shí)間：2011年08月09日 19:13:37 作者：
代碼很簡單，直接上代碼。別忘記引用JQuery包。
復(fù)制代碼 代碼如下:
<!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:"請選擇"
}).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>
您可能感興趣的文章:
- jquery動(dòng)態(tài)改變form屬性提交表單
- jQuery動(dòng)態(tài)設(shè)置form表單的enctype值(實(shí)現(xiàn)代碼)
- jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法
- jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加與刪除數(shù)據(jù)操作示例
- jQuery實(shí)現(xiàn)表單動(dòng)態(tài)加減、ajax表單提交功能
- JQuery Ajax動(dòng)態(tài)生成Table表格
- 基于JQuery的動(dòng)態(tài)刪除Table表格的行和列的代碼
- jQuery動(dòng)態(tài)操作表單示例【基于table表格】
相關(guān)文章
CamanJs庫用于個(gè)人項(xiàng)目中進(jìn)行使用的圖形操作庫，這個(gè)庫是基于JavaScript的canvas操作庫，接下來，通過本篇文章給大家詳細(xì)介紹使用CamanJS在Web頁面上處理圖像的技巧，需要的朋友一起來學(xué)習(xí)下2015-08-08
最近在做項(xiàng)目的時(shí)候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家2014-07-07
這篇文章主要介紹了jquery判斷input值不為空的方法的相關(guān)資料,需要的朋友可以參考下2016-06-06
基于jquery的文章中所有圖片width大小批量設(shè)置方法
怎么設(shè)置文章中所有圖片width大小批量設(shè)置方法？這在實(shí)際應(yīng)用中很常見，下面有一段示例，希望對大家有所幫助2013-08-08
用jQuery.ajaxSetup實(shí)現(xiàn)對請求和響應(yīng)數(shù)據(jù)的過濾
本文主要對用jQuery.ajaxSetup實(shí)現(xiàn)對請求和響應(yīng)數(shù)據(jù)的過濾的過程與方法進(jìn)行詳細(xì)全面的實(shí)例講解。具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示提示框的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示提示框的方法,以兩個(gè)不同實(shí)例形式分析了jQuery鼠標(biāo)滑過顯示提示框的實(shí)現(xiàn)技巧與功能代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
jquery ajax return沒有返回值的解決方法，需要的朋友可以參考下。2011-10-10
這篇文章主要介紹了jQuery的text()方法用法,以實(shí)例形式詳細(xì)分析了jQuery的text()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)滑動(dòng)開關(guān)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)滑動(dòng)開關(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