使用缩进/间距将元素附加到 DOM

Question

这是一个例子。检查控制台以获取结果。前两个divs（未附加；<script>在控制台上方）具有适当的间距和缩进。但是，div即使它们完全相同，但附加的后两个s 也不会显示与原始相同的格式或空格。

例如输入

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

给出输出

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

当我想要它看起来像

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

有什么方法可以在附加元素之间生成适当的空白，并在使用innerHTML（或可能的类似方法）获取它时保留该间距？我需要能够直观地显示我正在处理的页面的层次结构和结构。

我尝试将它附加到实际 HTML 中的元素中，但它具有相同的行为

我可以按照 lincolnk 的建议使用文本节点和换行符来执行此操作，但它需要影响动态结果，这意味着我不能使用相同的方法，.createTextNode(' </br>')因为不同的元素位于层次结构的不同级别

请不要使用jQuery

Answer 1

我认为您要求能够将元素附加到 DOM，这样从返回的字符串document.body.innerHTML将使用缩进等进行格式化，就像您将它输入到文本编辑器中一样，对吗？

如果是这样，这样的事情可能会奏效：

function indentedAppend(parent,child) {
    var indent = "",
        elem = parent;

    while (elem && elem !== document.body) {
        indent += "  ";
        elem = elem.parentNode;
    }

    if (parent.hasChildNodes() && parent.lastChild.nodeType === 3 && /^\s*[\r\n]\s*$/.test(parent.lastChild.textContent)) {
        parent.insertBefore(document.createTextNode("\n" + indent), parent.lastChild);
        parent.insertBefore(child, parent.lastChild);
    } else {
        parent.appendChild(document.createTextNode("\n" + indent));
        parent.appendChild(child);
        parent.appendChild(document.createTextNode("\n" + indent.slice(0,-2)));
    }

}

演示：http : //jsbin.com/ilAsAki/28/edit

我没有考虑太多，所以你可能需要尝试一下，但这至少是一个起点。

另外，我假设缩进了 2 个空格，因为这就是您似乎正在使用的。

哦，在将它与<pre>标签或任何设置 CSS 以维护 HTML 空白的地方一起使用时，显然需要小心。