jQuery动态生成html元素

html-css010

jQuery动态生成html元素,第1张

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

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

3.使用模版生成html

以最简单的新闻网页为例,先是做一个模板页,假定其中3个地方要动态更换的:标题,内容,日期,哪么模板中这3个地方都要用特殊的名称表示。

要生成html页时,先读入html模板页,再查询数据库,把查询到标题,内容,日期的实际值替换模板中的特殊名称,并按规则命名另存这个文件。

以上是动态生成html页的基本原理,实际工作中,可灵活处理,比如一次性生成所有页,或者发布一个生成一个,可以用一个模板,也可以根据类别用3个5个模板。模板可以保存为文件文件,也可保存在数据库中等等。

?

动态生成的HTML标签样式一般可以使用2中方式确定

1、在生成HTML时将样式直接以style=""写在标签上;也就是使用行内样式

例如:

//动态生成html时,给html赋值行内样式

$("body").append("<div style='width:100pxheight:100pxbackground:red'>动态生成的div</div>")

2、预先定义好css样式,动态生成html时,将css类赋值给html

例:

/*定义css样式*/

.content{

    width:100px

    height:100px

    background:red

} //在动态生成html时,将css样式赋值class

$("body").append("<div class='content'>动态生成html赋值class样式</div>")

总结:在动态生成html标签时,直接使用行内样式快捷,但不容易修改;使用预先定义好的css样式赋值html标签的class属性,容易修改;建议使用后者。