Javascript 如何使document.write从左上角开始写入？_Javascript_Html_Css_Twig

Javascript 如何使document.write从左上角开始写入？

javascript html css twig

Javascript 如何使document.write从左上角开始写入？,javascript,html,css,twig,Javascript,Html,Css,Twig,这是我的模板文件： {% extends '::base.html.twig' %} {% block title %}Quote Metadata{% endblock %} {% block css_js %} <link href="{{ asset('bundles/acmequotes/css/bootstrap.css') }}" type="text/css" rel="stylesheet" /> {% endblock %} {% block bod

这是我的模板文件：

{% extends '::base.html.twig' %}

{% block title %}Quote Metadata{% endblock %}

{% block css_js %}
    <link href="{{ asset('bundles/acmequotes/css/bootstrap.css') }}" type="text/css" rel="stylesheet" /> 
{% endblock %}

{% block body %}
    <div class="metadata"> 
    <script>
        var obj = {{ data|raw }};
        document.write(JSON.stringify(obj, null, 4));
    </script>
    </div>

{% endblock %}

这是我在浏览器中看到页面代码时得到的html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Quote Metadata</title>
            <link href="/my-quotes/web/bundles/acmequotes/css/bootstrap.css" type="text/css" rel="stylesheet" /> 
        <link rel="icon" type="image/x-icon" href="/my-quotes/web/favicon.ico" />
    </head>
    <body>
    <div class="metadata"> 
    <script>
        var obj = {"hello":"world", "Test":["hello"]};
        document.write(JSON.stringify(obj, null, 4));   
    </script>
    </div>
</body>
</html>


引用元数据
var obj={“hello”：“world”，“Test”：[“hello”]}；
write（JSON.stringify（obj，null，4））；

以下是输出：

我想更改的是第一个显示在左上角的

“{”

，而不是它原来的样子-一点向下，一点向右

有什么建议吗？

为什么要使用document.write？您正在引入带有标记和缩进的额外空白字符

<div id="output" class="metadata"></div>
<script>
    var obj = {"hello":"world", "Test":["hello"]};
    document.getElementById("output").innerHTML = JSON.stringify(obj, null, 4);   
</script>


var obj={“hello”：“world”，“Test”：[“hello”]}；
document.getElementById（“output”）.innerHTML=JSON.stringify（obj，null，4）；

还有，为什么不使用pre

Eric

噢，非常感谢！现在它非常完美！我不使用pre，因为有时我的行太长，我想在它们太长的时候也能被划分到下一行。我在.css文件-

元数据{white space:pre wrap；}中有它

那么为什么不能将该类添加到pre中呢？是的，它更好。我会添加它。再次非常感谢！）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Quote Metadata</title>
            <link href="/my-quotes/web/bundles/acmequotes/css/bootstrap.css" type="text/css" rel="stylesheet" /> 
        <link rel="icon" type="image/x-icon" href="/my-quotes/web/favicon.ico" />
    </head>
    <body>
    <div class="metadata"> 
    <script>
        var obj = {"hello":"world", "Test":["hello"]};
        document.write(JSON.stringify(obj, null, 4));   
    </script>
    </div>
</body>
</html>

<div id="output" class="metadata"></div>
<script>
    var obj = {"hello":"world", "Test":["hello"]};
    document.getElementById("output").innerHTML = JSON.stringify(obj, null, 4);   
</script>