如何在HTML中用独立div展示JSON对象元素？（Node.js实现）

我有一个JSON对象数组，希望为每个对象单独使用一个div来承载并展示。我见过许多使用HTML表格及行的示例，但本次任务必须专门使用div来实现。尝试许久仍无头绪，特此求助。

当前代码： #

HTML结构：

<div id="each">
    <div>
        id
    </div>
    <div>
        title
    </div>
    <div>
        price
    </div>
</div>

数据源：

var data = [
    {
        id: 1,
        title: "foo1",
        price: 44
    },
    {
        id: 2,
        title: "foo2",
        price:78
    },
    {
        id: 3,
        title: "foo3",
        price:98
    },
    {
        id: 4,
        title: "foo4",
        price: 20
    }
];

尝试的构建函数：

function builddiv(target, articles) {
    articles.forEach((e) => {
        target.innerHTML += `<div> ${e.id} </div><div> ${e.title} </div><div> ${e.price} </div>`;
    });
}
builddiv(document.getElementById("each"), data);

解决方案 #

你的代码问题在于没有为每个JSON对象创建独立的容器div，导致所有字段元素都直接平铺在父容器里，无法区分单个对象。可以按以下方式修改：

1. 重构HTML结构
   将表头和内容区域分离，便于样式控制和逻辑区分：

<div class="data-wrapper">
    <!-- 表头 -->
    <div class="data-row data-header">
        <div>id</div>
        <div>title</div>
        <div>price</div>
    </div>
    <!-- 内容容器 -->
    <div id="each" class="data-content"></div>
</div>

2. 修改JS构建逻辑
   为每个对象生成专属的容器div，把该对象的三个字段包裹其中，确保每个对象独立：

function builddiv(target, articles) {
    articles.forEach(item => {
        // 创建单个对象的容器div
        const itemContainer = document.createElement('div');
        itemContainer.className = 'data-row';
        // 填充当前对象的字段内容
        itemContainer.innerHTML = `
            <div>${item.id}</div>
            <div>${item.title}</div>
            <div>${item.price}</div>
        `;
        // 将容器追加到目标区域
        target.appendChild(itemContainer);
    });
}
builddiv(document.getElementById("each"), data);

3. 添加CSS实现规整布局
   如果需要让div布局看起来像表格一样整齐，可以添加以下样式：

.data-wrapper {
    width: 80%;
    margin: 2rem auto;
    font-family: sans-serif;
}

.data-row {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
}

.data-row div {
    flex: 1;
    padding: 0.8rem;
    text-align: center;
}

.data-header {
    font-weight: bold;
    background-color: #f8f9fa;
}

.data-row:hover {
    background-color: #f1f3f5;
}

修改后，每个JSON对象都会被一个.data-row类的div单独承载，同时通过CSS可以让布局清晰易读，完全满足仅用div展示的需求。

内容的提问来源于stack exchange，提问作者chris1234