Добавление элементов в DOM с отступом / интервалом
Вот пример, Проверьте консоль на результат. Первые дваdiv
s (не добавлено; над в консоли) имеют правильные интервалы и отступы. Тем не менее, вторые два
div
s не показывают такое же форматирование или пробелы, как оригинал, даже если они полностью одинаковы, но добавлены.
Например, ввод
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, пожалуйста