JavaScript 中怎么用原生 DOM 动态渲染一个商品列表-js教程-PHP中文网

原生 dom 动态渲染商品列表的核心是：获取数据→创建元素→填充内容→插入页面；需用 document.createelement 构建结构、textcontent 防 xss、dataset 存 id，并通过 documentfragment 批量插入提升性能。

javascript 中怎么用原生 dom 动态渲染一个商品列表

用原生 DOM 动态渲染商品列表，核心是：获取数据 → 创建元素 → 填充内容 → 插入到页面。不需要框架，几行关键代码就能搞定。

准备一个容器节点

先在 HTML 中留一个空的容器，比如：

后续所有商品项都会插入到这里。确保 JS 执行前该元素已存在（可把 script 放在 body 底部，或用 DOMContentLoaded）。

用数据生成 DOM 节点

假设有如下商品数组：

const products = [
  { id: 1, name: "iPhone 15", price: 5999 },
  { id: 2, name: "AirPods Pro", price: 1899 },
  { id: 3, name: "MacBook Air", price: 9999 }
];

推荐用 document.createElement 逐个创建结构清晰的节点，避免拼接字符串（易出错、难维护）：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

对每个商品，创建 article 或 div 作为单个商品容器
内部依次创建 h3（商品名）、p（价格）、button（如“加入购物车”）等子元素
用 textContent 填充文本（防 XSS），用 dataset 存 ID 等元信息

批量插入并提升性能

不要每循环一次就调用 appendChild，会触发多次重排。正确做法：

创建一个 DocumentFragment 作为临时容器
把所有商品节点先加到 fragment 中
最后一次性把 fragment 插入目标容器

示例关键代码：

const frag = document.createDocumentFragment();
products.forEach(product => {
  const item = document.createElement('article');
  item.dataset.id = product.id;

  const title = document.createElement('h3');
  title.textContent = product.name;

  const price = document.createElement('p');
  price.textContent = `¥${product.price}`;

  const btn = document.createElement('button');
  btn.textContent = '加入购物车';
  btn.addEventListener('click', () => addToCart(product));

  item.append(title, price, btn);
  frag.appendChild(item);
});
document.getElementById('product-list').appendChild(frag);