怎么将格式化后的 json 展示到前端界面，并且格式不被破坏

[Romanticlizhi]

比如一串 json 格式为{"name":"HTL","sex":"男","age":"24"}，格式化后为以一个键值对占一行的格式，总共三行。此时我想要在前台页面展示格式化后的数据格式。我现在的做法是：写了一个格式化 json 的函数，将格式化后的数据保存在一个变量中，然后前台是将数据放在 span 标签中。现在我有主要几个问题无法解决：

1. 怎么将变量的值赋给 span （重要！）
2. span 会不会破坏格式化后的数据格式
3. 前端有什么标签不会破坏数据格式
4. 有木有哪位大神指点一个更加好的方法拯救我吧，在此谢过啦！！！很急！！杭州的可以面对面交流！！

[cliberal]

为啥要放 span 里，直接将格式化后的数据放 pre 里不行么

[vankid]

用 html 标签<br>换行就可以，span 赋值直接$("选择符").html(json);

[vankid]

如果你不想改写好的格式化工具，那就 json.replace("\n","<br/>");然后传到前台$("选择符").html(json)

[Romanticlizhi]

@vankid 好坑，网上查出一大堆用.innerHTML()，innerText()等等都不行，就是没有.html()，可怜我这个做 Java 的后端了，非常感谢！！！

[seancheer]

<pre>标签不会破坏格式。。。顺带，楼主你头像让人耳目一新

[Romanticlizhi]

@vankid 为啥 json.replace("，","<br/>");只有第一行的键值对后面的逗号被替换了。。。。

[ijse]

```
const formatedJSON = JSON.stringify(data, null, '\t')
```
然后把它放到<pre>中就好了。

[ijse]

const $pre = document.createElement('pre')
$pre.innerHTML = formatedJSON
document.querySelector('span').appendChild($pre)

[KeepPro]

女装大佬连这都解决不了了么 233

[FlowerChen]

用个循环一个个读出来，放到你要的 DOM 里面，比如 table 里面

[Romanticlizhi]

@ijse 感谢了，但是，请看 append!

[vankid]

@Romanticlizhi 我也是个 java 后端啊。。。

[vankid]

@Romanticlizhi javascript 是这样子啦，你搜下 replaceAll,有很多写好的方法的。或者你在后台用 java 里的 replace 换