无法将javascript中的json api正确打印为html

我从javascript请求中得到了一个json api。我能够打印输出到控制台，它看起来格式正确

{
  "id": "1",
  "name": "John"
}

但当我打印到html页面时。看起来像这样

'{"id": "1", "name": "john"}'

这里是我的javascript文件

$(function() {
    //variables
    var functionName = 'getQuotes';

    function LoadData() {
        $.get("http://localhost/quoteapi/api.php?function="+functionName+"&jsonCallback=?", function(data) {
            // console.log(data);
            jsonstr = data.substring(2, data.length-1)
            console.log(jsonstr);
            var jsonPretty = JSON.stringify(jsonstr,null,6);           
        });
    }

    LoadData();      
});

我想打印到id为“quote”的标签上

欢迎任何帮助

使用

未设置样式的p标记

{
“id”：“1”，
“姓名”：“约翰”
}


无样式预标记
{
“id”：“1”，
“姓名”：“约翰”
}

样式化p标签

{
“id”：“1”，
“姓名”：“约翰”
}
通过不同的方式，您可以将每个“\n”（换行符）替换为
，将空格替换为

片段：


var jsonPretty=JSON.stringify（{“id”：“1”，“name”：“John”}，null，6）；
document.querySelector（“#quote”）.innerHTML=jsonPretty
.替换（/\n（*）/g，函数（匹配，p1）{
返回'
'+''。重复（p1.长度）；
});
变量x={“数据”：{“x”：“1”，“y”：“1”，“url”：”http://url.com}，“事件”：“开始”，“显示”：1，“id”：50}；
document.querySelector（'#newquote'）.innerHTML=JSON.stringify（x，null，6）
.替换（/\n（*）/g，函数（匹配，p1）{
返回'
'+''。重复（p1.长度）；
});

---------------------
您是说当您在页面中插入该字符串时，它会将“John”的大小写更改为“John”？也许可以分享更多你所期待的？可能是重复的我认为可以从JavaScript进行格式化，所以我不必创建一个模型html页面。。。
<p id="quote"></p>