Question

这是我小小的＃34; Online-Shop＆＃34;的代码的一部分，你可以看到我在我的主要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等，如果我用我的想法插入它，可以使用这段代码吗？

Answer 1

我谦虚的建议是使用某种形式的javascript模板引擎。我经常使用John Resig microtemplating中包含的变体underscore.js，这是一个包含80多个实用功能的精彩小库，本身就是一个小宝贝。

它是这样的：

在您的html中，您可以在适当的标记内定义模板，该示例适用于下划线/ Resig微模板。在你的情况下，我会使用循环来遍历产品

<script type="text/template" id="clothesTableTemplate">
  <table class="clothes">
    <% clothes.forEach(function(cloth){ %>
    <tr>
      <td>
        <div class="product">
          <img class="product_img" src="<%- cloth.imgSrc %>">
          <div class="price">
            <span class="price_text"><%- cloth.priceText %></span> 
            <div id="m1" class="price_img-wrapper">
              <img src="cart_mini.png">
            </div>
          </div>
        </div>
      </td>
    </tr>
    <% }); %>
  </table>
</script>

然后你可以从你的js中调用模板：

// say you got this data from the db

var clothes = [
  {
    imgSrc: 'men_jacket1.jpg',
    priceText: '95 €'
  },
  {
    imgSrc: 'men_jacket2.jpg',
    priceText: '70 €'
  }
];

var clothesTemplate = _.template(
  $("script#clothesTableTemplate").html()
);

$('div.main').html(clothesTemplate(clothes));

// With little modifications we could also define a template containing
// only the row and append single rows to the table

其他广泛使用的模板系统是Handlebars和Mustache

另一种有点不同的方法是Knockout js，它非常干净，我全心全意地建议你研究。

Answer 2

要追加，你可以使用类似的东西

$('div.main').append('blablab');

$（'div.main）.html实际上等于

document.getElementById('div.main').innerHTML = 'blablab';

这是正确的JQuery语法，但我不建议只使用Javascript添加静态HTML，这没有任何优势。

Answer 3

你必须有更好的方法：

1 - 使用.load（）并在请求中返回html

$('div.main').load(some_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并逐个追加它们）。我是第一种方法，创建表服务器

Javascript / Jquery使用.html（）和.append（）“创建”元素

3 个答案: