jQuery動態生成html元素的幾種方法
一般來說,可以通過以下幾種方式動態建立html元素:
1、使用jQuery建立元素的語法
2、把動態內容存放到陣列中,再遍歷陣列動態建立html元素
3、使用模版
1.使用jQuery動態建立元素追加到jQuery物件上。
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$('<input />', {
id:'cbx',
name:'cbx',
type:'checkbox',
checked:'checked',
click:function() {
alert("點我了~~");
}
}).appendTo($('#wrap'));
});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
執行效果如下圖所示:
2.先把內容放到陣列中,然後遍歷陣列拼接成html
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<style type="text/css">
table {
border: solid 1px red;
border-collapse: collapse;
}
td {
border: solid 1px red;
}
</style>
<script type="text/javascript">
$(function() {
vardata = ["a","b","c","d"];
varhtml = '';
for(vari = 0; i < data.length; i ++) {
html += "<td>"+ data[i] + "</td>";
}
$("#row").append(html);
});
</script>
</head>
<body>
<table>
<tr id="row"></tr>
</table>
</body>
</html>
執行效果如下圖所示:
3.使用模版生成html
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
vara = buildHTML("a","我是由模版生成的", {
id:"myLink",
href:"http://www.baidu.com"
});
$('#wrap1').append(a);
varinput = buildHTML("input", {
id:"myInput",
type:"text",
value:"我也是由模版生成的~~"
});
$('#wrap2').append(input);
});
buildHTML = function(tag, html, attrs) {
// you can skip html param
if(typeof(html) != 'string') {
attrs = html;
html = null;
}
varh = '<'+ tag;
for(attr inattrs) {
if(attrs[attr] === false)continue;
h += ' ' + attr + '="'+ attrs[attr] + '"';
}
returnh += html ? ">"+ html + "</"+ tag + ">": "/>";
};
</script>
</head>
<body>
<div id="wrap1"></div>
<div id="wrap2"></div>
</body>
執行效果如下圖所示:
相關文章
- JavaScript動態生成html元素JavaScriptHTML
- 解析Jquery取得iframe中元素的幾種方法jQuery
- 動態生成的html元素繫結click事件HTML事件
- 動態生成HTML元素併為元素追加屬性HTML
- jquery動態生成元素並飄落效果jQuery
- jQuery動態建立html元素並設定屬性jQueryHTML
- 動態生成HTML元素-模擬線上考試功能HTML
- jQuery給動態新增的元素繫結事件的方法jQuery事件
- Swift 幾種動態判斷類的方法Swift
- jquery設定元素css樣式的幾種方式jQueryCSS
- jQuery幾種隱藏span的方法jQuery
- MATLAB 生成exe 的幾種方法Matlab
- 動態生成html元素繫結事件iphone失效問題解決HTML事件iPhone
- jQuery 操作html元素jQueryHTML
- jQuery動態設定div元素的尺寸jQuery
- html元素滾動定位方法HTML
- jQuery元素內容操作的方法有多少種?jQuery
- 幾種生成隨機數方法隨機
- Android播放Gif動態圖片的幾種方法Android
- Jquery中為後生成或插入的Html元素先設定響應事件處理方法jQueryHTML事件
- jquery 為動態新增的元素繫結事件jQuery事件
- javascript如何動態生成一個元素JavaScript
- CSS“隱藏”元素的幾種方法的對比CSS
- 使用CSS隱藏HTML元素的4種常用方法CSSHTML
- PHP生成隨機密碼的幾種方法PHP隨機密碼
- 動態生成ios plist的方法iOS
- jquery為動態新增元素新增事件薦jQuery事件
- 動態生成DOM元素的高度及行數獲取與計算方法
- jquery給動態新增的dom元素繫結事件jQuery事件
- 使用 JS 來動態操作 css ,你知道幾種方法?JSCSS
- JavaScript動態新增或者刪除HTML元素JavaScriptHTML
- 利用 Django 動態展示 Pyecharts 圖表資料的幾種方法DjangoEcharts
- 利用jQuery在指定元素中新增html元素jQueryHTML
- php生成唯一id的幾種解決方法PHP
- JQuery1:動態操作HTML和CSSjQueryHTMLCSS
- jQuery實現DOM元素事件動態繫結jQuery事件
- jquery動態新增li元素程式碼例項jQuery
- jquery動態設定元素的尺寸程式碼例項jQuery