0 引言

最近需要做一個介面管理的功能，需要在前端頁面展示從介面獲取到的json資料，我上網查了一些資料，發現有 jquery的一個外掛可以使用:jQuery.json-viewer 。頁面展示的效果很好，但是需要安裝npm包來實現。那麼有沒有不用安裝npm包又能實現同樣功能的方法呢？我繼續搜尋，終於發現了一個非常簡單的方法：

1實現方法

方法其實很簡單，直接上程式碼：
html程式碼如下：

<pre><code id="json"></code></pre>

js程式碼如下：

let btn = document.querySelector('#json'
 
);
let data = {name:'tim', age: 23, grade: 3};
btn.textContent = JSON.stringify(data, null, '  ');

效果如下：

是不是很簡單呢。