将Object.Entries（myObject）输出包装在html标记中

Question

我需要在网页上输出一个大对象的键值对。当我发现object.entries（）可以做到这一点时，我松了一口气。但是我需要对格式进行一些控制，所以我想用一个特殊的类将键包装在span标记内，用span标记包装值，用一个特殊的类包装。

有没有什么简单的方法用html标记包装Object.Entries的输出？

这是我用于在页面上编写对象的代码：

$('.mycontainer').html(Object.entries(myObject));

Answer 1

在使用jQuery时，我将使用append和text方法，如下所示：

null

let obj = {
  name: "Helen",
  age: 26,
  gender: "female"
};

$(".container").empty().append(
    $("<table>").append(
        Object.entries(obj).map(pair =>
            $("<tr>").append(
                pair.map(item => $("<td>").text(item))
            )
        )
    )
);

.container td:first-child {
    background: silver;
    text-align: right;
    color: white;
}

.container td:last-child {
    background: lightyellow;
}

.container td {
    padding: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container"></div>

Answer 2

好吧，这似乎是最简单的方法：

Object.entries(myObject).forEach(([key, value]) 
=> $('.myContainer').append((
`<span class="k">${key}</span>: <span class="v">${value}</span>`
)));