提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery动态创建html元素的常用方法汇总

jQuery方法HTML 常用 元素 汇总 动态创建
2023-06-13 09:15:45 时间

本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：

一般来说，可以通过以下几种方式动态创建html元素：

1、使用jQuery创建元素的语法
2、把动态内容存放到数组中，再遍历数组动态创建html元素
3、使用模版

1.使用jQuery动态创建元素追加到jQuery对象上。

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scriptsrc="Scripts/jquery-1.10.2.js"></script>
<scripttype="text/javascript">
$(function(){
$("<input/>",{
id:"cbx",
name:"cbx",
type:"checkbox",
checked:"checked",
click:function(){
alert("点我了~~");
}
}).appendTo($("#wrap"));
});
</script>
</head>
<body>
<divid="wrap"></div>
</body>

运行效果如下图所示：

2.先把内容放到数组中，然后遍历数组拼接成html

<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scriptsrc="Scripts/jquery-1.10.2.js"></script>
<styletype="text/css">
table{
border:solid1pxred;
border-collapse:collapse;
}

td{
border:solid1pxred;
}
</style>
<scripttype="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>
<trid="row"></tr>
</table>
</body>
</html>

运行效果如下图所示：

3.使用模版生成html

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scriptsrc="Scripts/jquery-1.10.2.js"></script>
<scripttype="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){
//youcanskiphtmlparam
if(typeof(html)!="string"){
attrs=html;
html=null;
}
varh="<"+tag;
for(attrinattrs){
if(attrs[attr]===false)continue;
h+=""+attr+"=""+attrs[attr]+""";
}
returnh+=html?">"+html+"</"+tag+">":"/>";
};
</script>
</head>
<body>
<divid="wrap1"></div>
<divid="wrap2"></div>
</body>

运行效果如下图所示：

相信本文所述对大家使用jQuery进行WEB程序设计有一定的借鉴价值。

相关文章