Question

<script>
    var obj = {{ data|raw }}
    document.body.innerHTML = "";
    document.body.appendChild(document.createTextNode(JSON.stringify(obj, null, 4)));  
</script> 

This is the body of my html file. The problem is that when I make a new css file – metadata.css just for this html file and it contains this:

body {
    white-space: pre-wrap; 
    width: 770px;
} 

everything works. But I don’t need this new file. So I tried to change my html to this:

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

and add the style for the div in the css file where is all my css and it became this:

body {
    text-align: center;
}

table{
    width: 100%;
    border-collapse:collapse;
    margin: 20px 0px;
}

table,th, td{
    border: 1px solid black;
    font-size: 17px;
}

th {
    background-color: #D3D3D3;
    font-weight: bold;
}

td {
   padding: 3px 5px; 
}

a.pagination {
    margin: 9px;
}

span {
    font-weight: bold;
}

.find_page {
    margin: 20px;
}

form input {
    width: 50px;
}

.metadata {
    white-space: pre-wrap; 
    width: 770px;
    text-align: left;
}

but the problem is that in this way, it doesn’t work – I think that the div is not styled at all. Can you please help me to fix it?

Answer 1

The problem is that your javascript is not targeting the container it’s in.

    document.body.innerHTML = "";
    document.body.appendChild(document.createTextNode(JSON.stringify(obj, null, 4)));  

is going to target the body of the document since it’s using document.body, and not care about where the code is defined (and therefore the class of the container is entirely discarded…actually erased by the innerHTML = "" statement. What you’d be looking for is document.write which will output in the place of definition (and with no clearing statement).

 document.write(document.createTextNode(JSON.stringify(obj, null, 4)));  

This in general should be replaced by explicitly tageted selection and unobtrusive JavaScript when you start to do anything more than one-off code.