当前位置: 首页 > 知识库问答 >
问题:

将Object.Entries(myObject)输出包装在html标记中

赵辉
2023-03-14

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

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

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

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

共有2个答案

利思源
2023-03-14

在使用jQuery时,我将使用appendtext方法,如下所示:

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>
阴阳
2023-03-14

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

Object.entries(myObject).forEach(([key, value]) 
=> $('.myContainer').append((
`<span class="k">${key}</span>: <span class="v">${value}</span>`
))); 
 类似资料:
  • 我有一个带有文本元素的XML,它可以包括标记的文本,并且取决于元素属性值,我知道内容是CDATA封装的还是XHTML。 因为我不能在文本元素中拥有/创建任何子元素,所以如果我得到XHTML,我将需要封装。 这只是我需要在XSLT中转换的许多元素中的一个 一个简短的xml示例 我终于试过了,它确实达到了目的。只是html标记没有被保留。 这将产生以下结果(请注意 标记在第一个文本中消失) 我还尝试使

  • 问题内容: 我在将选项卡中的JSON输出到HTML表时遇到了麻烦(这是javascript / jQuery夜间课程分配的一部分)。请有人看看,并建议我要对表格格式的输出进行哪些修改?我收到成功警报,但表未填充。 谢谢。 和HTML: 问题答案: 代码的主要问题是,在AJAX请求成功完成后,您没有调用任何函数。您至少需要致电才能填充数据。 但是,您可以对代码进行一些改进。首先,删除。这是默认值,并

  • 问题内容: 根据HTML规范,HTML中的标记没有属性,只有属性。因此,如果要阻止用户更改下拉菜单,则必须使用。 唯一的问题是禁用的HTML表单输入不会包含在POST / GET数据中。 模拟标签属性并仍然获取POST数据的最佳方法是什么? 问题答案: 您应该保留该元素,但还要添加另一个具有相同名称和值的隐藏元素。 如果重新启用SELECT,则应在onchange事件中将其值复制到隐藏输入并禁用(

  • 我试图在HTML的pre标签中包装文本,但它不起作用。我使用下面的CSS作为我的标签。 我从如何在pre标记中换行文本? 我已添加

  • 我正试图在quarkus应用程序目录中创建我的“数据”文件夹。我试过用文档写的所有东西,比如应用程序。属性、maven属性和创建资源配置。json。我得到的最好结果是保存资源配置。将json文件本身放入-Pnative building中。如果能帮我解决这个问题,我将不胜感激!在此处输入图像描述 Quarkus属性: pom文件本身:

  • 我有一个任务,需要在web应用程序内部的几个页面上添加一些标记。文本已经存在,但包装在其他标签中,我需要将其转换为h1标签。当我这样做的时候,我需要在页面上保持相同的设计,所以设计明智,什么都不应该改变。我们需要谷歌机器人的h1标签。 让我在下面给你展示一个例子。目前我有一页是这样的: null null 我需要在那里插入。我在internet上读到,在中添加不是一个好主意,因为我的第一个想法是用