这是我的小“在线商店”中代码的一部分,您可以看到我在主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并将其一个接一个地添加)。我会第一种方法,在服务器端创建表

07-24 09:45
查看更多