0

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

例如输入

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

4

2 回答 2

5

我认为您要求能够将元素附加到 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 空白的地方使用它时，你显然需要小心。

于 2013-11-04T01:35:02.773 回答
0

您可以使用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);
于 2013-11-01T23:00:42.797 回答