在前端開發中，JavaScript 是必不可少的一部分。它可以讓網頁動態地展示數據、響應用戶的操作，以及進行更高級的交互。其中，追加 div 的操作又是非常常見的一個需求。
假設我們需要在一個頁面中展示多個商品信息，每個商品信息都需要用一個 div 來封裝，并且需要按照一定的順序進行展示。下面讓我們看看該如何使用 JavaScript 來實現這個需求。
首先，我們需要在頁面中定義一個顯示商品的容器，比如下面這樣：

// HTML 代碼
<div id="goods-container">
</div>

接著，我們需要定義一些商品數據，以便將它們展示在頁面中。比如下面這樣：

// JavaScript 代碼
var goodsData = [
{
id: 1,
name: '商品 A',
price: '100'
},
{
id: 2,
name: '商品 B',
price: '200'
},
{
id: 3,
name: '商品 C',
price: '300'
}
];

接下來就是重頭戲了，我們需要使用 JavaScript 來動態地添加 div 元素，并將商品數據展示在這些 div 中。代碼如下：

// JavaScript 代碼
var container = document.getElementById('goods-container');
<br>
for (var i = 0; i < goodsData.length; i++) {
var good = goodsData[i];
<br>
  var div = document.createElement('div');
div.id = 'good_' + good.id;
<br>
  var name = document.createElement('p');
name.innerHTML = '名稱：' + good.name;
div.appendChild(name);
<br>
  var price = document.createElement('p');
price.innerHTML = '價格：' + good.price;
div.appendChild(price);
<br>
  container.appendChild(div);
}

以上代碼使用了一個 for 循環，它會遍歷商品數據，并且使用 document.createElement 方法動態創建 div 元素。然后，我們為每個 div 設置了一個 id，以方便后續的操作。接著，我們又使用 document.createElement 方法分別創建了兩個 p 標簽，用來展示商品名稱和價格。最后，我們將這兩個 p 標簽添加到 div 中，并將 div 添加到商品容器中。
至此，在頁面中就會展示三個 div，每個 div 包含商品名稱和價格。如果我們需要展示更多的商品，只需要在 goodsData 數組中添加更多的商品數據，并重新運行以上代碼即可。
以上就是使用 JavaScript 實現追加 div 的基本操作。當然，我們還可以使用其他高級特性來實現更加復雜的需求，比如使用 jQuery 框架中的 append 方法，或使用 React 框架中的 JSX 語法來進行操作。不過無論是哪種方法，掌握基本的 HTML 結構和 JavaScript 語言是必不可少的。