ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jquery を使用して HTML 要素を動的に作成する一般的な方法の概要
jQuery_jquery を使用して HTML 要素を動的に作成する一般的な方法の概要
- WBOYオリジナル
- 2016-05-16 16:37:081216ブラウズ
この記事の例では、jQuery を使用して HTML 要素を動的に作成する一般的な方法について説明します。これは、Web プログラミングに jQuery を使用する場合に非常に役立ちます。皆さんの参考に共有してください。具体的な方法は以下の通りです。
一般的に、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 () {
var data = ["a", "b", "c", "d"];
var html = '';
for (var i = 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 () {
var a = buildHTML("a", "我是由模版生成的", {
id: "myLink",
href: "http://www.baidu.com"
});
$('#wrap1').append(a);
var input = 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;
}
var h = '<' + tag;
for (attr in attrs) {
if (attrs[attr] === false) continue;
h += ' ' + attr + '="' + attrs[attr] + '"';
}
return h += html ? ">" + html + "</" + tag + ">" : "/>";
};
</script>
</head>
<body>
<div id="wrap1"></div>
<div id="wrap2"></div>
</body>
操作効果は以下の通りです:
この記事で説明されている内容は、誰もが jQuery を使って WEB プログラミングを行う上で一定の参考になると思います。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。