Aqui está um exemplo. Verifique o console para o resultado. Os dois primeirosdivs (não anexado; acima do<script> no console) tenha o espaçamento e a indentação corretos. No entanto, os segundos doisdivs não mostra a mesma formatação ou espaço em branco que o original, apesar de serem completamente os mesmos, mas anexados.

Por exemplo, a entrada

var newElem = document.createElement('div');
document.body.appendChild(newElem);
var another = document.createElement('div');
newElem.appendChild(another);
console.log(document.body.innerHTML);

Dá a saída

<div><div></div></div>

Quando eu quero que pareça

<div>
  <div></div>
</div>

Existe alguma maneira de gerar o espaço em branco adequado entre os elementos anexados e manter esse espaçamento ao obtê-lo usandoinnerHTML (ou um meio similar possível)? Eu preciso ser capaz de exibir visualmente a hierarquia e a estrutura da página em que estou trabalhando.

Eu tentei anexá-lo dentro de um elemento que está no HTML real, mas tem o mesmo comportamento

Eu ficaria bem em fazer isso usando nós de texto e quebras de linha como lincolnk sugeriu, mas ele precisa afetar os resultados dinâmicos, o que significa que não posso usar o mesmo.createTextNode(' </br>') porque diferentes elementos estão em diferentes níveis da hierarquia

Não jQuery por favor