javascript - 通过 DOM 创建 html，结果只显示在控制台，而不会显示在网页上

Question

我是编码新手。我正在尝试使用 DOM 创建一些 html。我让它在控制台中工作，但出于某种原因，它只显示 [object HTMLDivElement][object HTMLDivElement][object HTMLDivElement]在我的网页上。

这是我的 html:<div id="all-products"></div>

这是我的 js 代码:

let inventory = [
  ['LA-LG-STICKER', 300, 'Large Sticker', 'images/la-large-sticker-256px.png', 'Show your Launch pride by plastering your laptop with these beautiful die-cut stickers.'],
  ['LA-SM-STICKER', 200, 'Small Sticker', 'images/la-small-sticker-128px.png', "It\'s a tiny Launch sticker. How cute!"],
  ['LA-T-SHIRT', 50, 'T-Shirt', 'images/la-t-shirt-200px.png', '100% Cotton. Makes a great gift.']
]

class Product {
  constructor(id, quantity, name, image, description) {
    this.id = id;
    this.quantity = quantity;
    this.name = name;
    this.image = image;
    this.description = description;
  }

  sell() {
    this.quantity -= 1
    return this.quantity;
  }

  toHTML() {
    let div = document.createElement('div');
    div.className = 'product';
    div.innerHTML += '<h1>Product Name:' + this.name + '</h1>';
    div.innerHTML += '<h5>' + this.quantity + ' In Stock</h5>'
    div.innerHTML += '<img src="' + this.image +'" alt="' + this.name + '" />'
    div.innerHTML += '<h3>Description</h3>'
    div.innerHTML += '<p>' + this.description + '</p>'
    return div;
  }
}

let products = inventory.map(item => {
  return new Product(...item);
})


let element = document.getElementById('all-products');

products.forEach((product) => {
  element.innerHTML += product.toHTML()

})

Answer 1

您正在生成一个 HTMLElement，然后最后将其分配给 innerHTML。那是行不通的，它只是将 HTMLElement 转换为 string，从而生成您所看到的内容。

相反，您需要使用 element.appendChild() 将其添加到 DOM 中或一些这样的。基本上，您只需更改一行:

products.forEach((product) => {
  element.appendChild(product.toHTML());
})

或者，您可以一直使用字符串 - 它也会更快:

toHTML() {
  let ret = '<div class="product">';
  ret += '<h1>Product Name:' + this.name + '</h1>';
  ret += '<h5>' + this.quantity + ' In Stock</h5>';
  ret += '<img src="' + this.image +'" alt="' + this.name + '" />';
  ret += '<h3>Description</h3>';
  ret += '<p>' + this.description + '</p>';
  ret += '</div>';
  return ret;
}

为了获得最佳性能，您还可以进行两项优化:

• 不要重复修改 element.innerHTML，而是将所有 HTML 收集到一个大字符串中，并在完成后分配一次。
• 使用数组逐段构建长字符串会更有效率。本质上，不是 var ret = ""; ret += "piece"+ x + "piece" 你去 var ret = []; ret.push("piece", x, "piece"); 最后做一个 ret.join("") 把它全部连接成一个大字符串。