Добавление элементов в DOM с отступом / интервалом

Вот пример, Проверьте консоль на результат. Первые дваdivs (не добавлено; над в консоли) имеют правильные интервалы и отступы. Тем не менее, вторые дваdivs не показывают такое же форматирование или пробелы, как оригинал, даже если они полностью одинаковы, но добавлены.

Например, ввод

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

Дает вывод


Когда я хочу, чтобы это выглядело как


  

Есть ли способ сгенерировать правильное пустое пространство между добавленными элементами и сохранить это расстояние при получении с помощьюinnerHTML (или возможное подобное средство)? Мне нужно иметь возможность визуально отображать иерархию и структуру страницы, которую яЯ работаю над.

Я попытался добавить его в элемент, который находится в фактическом HTML, но у него такое же поведение.

было бы неплохо делать это с использованием текстовых узлов и разрывов строк, как предложил Линкольн, но это должно влиять на динамические результаты, то есть я не могу использовать то же самое.createTextNode(' <br>') потому что разные элементы находятся на разных уровнях иерархии

Нет JQuery, пожалуйста

Ответы на вопрос(2)

Ваш ответ на вопрос