Question

Here is an example。检查控制台的结果。前两个div（未附加;在控制台中<script>上方）具有适当的间距和缩进。但是，后两个div不会显示与原始格式相同的格式或空格，即使它们完全相同但附加了。

例如输入

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的空白区域。

Answer 2

您可以使用document.createTextNode()直接添加字符串。

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

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

2 个答案: