这是我的小“在线商店”中代码的一部分,您可以看到我在主div上追加了一个表。
$('div.main').html('<table class="clothes">' +
'<tr>' +
'<td><div class="product"><img class="product_img" src="men_jacket1.jpg"><div class="price"><span class="price_text">95 €</span> <div id="m1" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'<td><div class="product"><img class="product_img" src="men_jacket2.jpg"><div class="price"><span class="price_text">70 €</span> <div id="m2" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'<td><div class="product"><img class="product_img" src="men_jacket3.jpg"><div class="price"><span class="price_text">55 €</span> <div id="m3" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'</tr>' +
'<tr>' +
'<td><div class="product"><img class="product_img" src="men_tshirt1.jpg"><div class="price"><span class="price_text">10 €</span> <div id="m4" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'<td><div class="product"><img class="product_img" src="men_tshirt2.jpg"><div class="price"><span class="price_text">25 €</span> <div id="m5" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'<td><div class="product"><img class="product_img" src="men_tshirt3.jpg"><div class="price"><span class="price_text">30 €</span> <div id="m6" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'</tr>' +
'<tr>' +
'<td><div class="product"><img class="product_img" src="men_trouser1.jpg"><div class="price"><span class="price_text">20 €</span> <div id="m7" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'<td><div class="product"><img class="product_img" src="men_trouser2.jpg"><div class="price"><span class="price_text">70 €</span> <div id="m8" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'<td><div class="product"><img class="product_img" src="men_trouser3.jpg"><div class="price"><span class="price_text">45 €</span> <div id="m9" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
'</tr>' +
'</table>');
我的问题是:这是添加或创建html元素的正确方法吗?如果不正确,为什么?
例如,我从数据库中获得了价格,img等信息,如果我将其插入我的想法中,可以使用此代码吗?
最佳答案
您必须采用更好的方法:
1-使用.load()并在请求上返回html
$('div.main').load(some_url);
现在,使用您网站的url形式呈现您需要的表(仅该表),完成后,您定义html服务器端,而jquery只加载它,我会这样做
2-使用jQuery创建元素,这可以为您提供更多控制
var table = $('<table>').addClass('clothes');
var tr = $('<tr>');
var td = $('<td>');
var div = $('<div>')addClass('product');
var img = $('<img>').addClass('product_img').attr('src',"men_trouser1.jpg");
div.append(img);
td.append(div);
tr.append(td);
table.append(tr);
$('div.main').append(table);
这很丑陋,因为使用javascript创建html总是很丑陋,至少这种方式具有更多控制权(您可以在循环内创建td并将其一个接一个地添加)。我会第一种方法,在服务器端创建表