jQuery动态创建超文本标记语言元素的常用方法汇总

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

一般来说，可以通过以下几种方式动态创建超文本标记语言元素：

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

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

meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : script/jquery-1。10 .2 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' input/')，{ id: 'cbx '，name: 'cbx '，type: 'checkbox '，checked: 'checked '，单击：函数(){ alert('点我了~~');} }).appendTo($(" # wrap ")；});/script/head body div id=' wrap '/div/body运行效果如下图所示：

2.先把内容放到数组中，然后遍历数组拼接成超文本标记语言

head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : scripts/jquery-1。10 .2 .js '/脚本样式类型=' text/CSS '表格{边框：实心1px红色；边界崩溃：崩溃；} td { border:固体1px红色；}/style script type=' text/JavaScript ' $(function(){ var data=[' a '，' b '，' c '，' d ']；var html=for(var I=0；一。数据。长度；I){ html=' TD '数据[I]'/TD '；} $('#row ').追加(html)；});/脚本/头体表tr id='row'/tr /table /body /html运行效果如下图所示：

3.使用模版生成超文本标记语言

meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : scripts/jquery-1。10 .2 .js '/script脚本类型=' text/JavaScript ' $(function(){ var a=BuildHTML(' a '，'我是由模版生成的，{ id: 'myLink '，href : ' http://www。百度。com ' })；$('#wrap1 ').追加(a)；var input=buildHTML('input '，{ id: 'myInput '，type: 'text '，value: '我也是由模版生成的~~' });$('#wrap2 ').追加（输入);});buildHTML=函数(标记、HTML、attrs) { //可以跳过html参数if (typeof (html)！=' string '){ attrs=html；html=null} var h='标记；for(attr中的attr){ if(attr[attr]==false)继续；h=' attr '=' attr[attr]' ' '；}返回h=html？html '/'标记' : '/';};/script/head body div id=' wrap 1 '/div div id=' wrap 2 '/div/body运行效果如下图所示：

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