Javascript 使用缩进/间距将元素追加到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);

给出输出

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

当我想让它看起来像

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

在使用

innerHTML

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

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

我可以按照lincolnk的建议使用文本节点和换行符，但它需要影响动态结果，这意味着我不能使用相同的

.createTextNode（“
”）

，因为不同的元素位于层次结构的不同级别

---

请不要使用jQuery

您可以使用

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);

---

您可以使用

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中，这样从

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)));
    }

}

演示：

我没有花太多的心思在它上面，所以你可能需要玩它，但它至少是一个起点

另外，我假设缩进为2个空格，因为您似乎正在使用它

---

哦，显然，在使用

标记时，或者在CSS设置为保持HTML空白的任何地方，您都需要小心。

我认为您要求能够将元素附加到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)));
    }

}

演示：

我没有花太多的心思在它上面，所以你可能需要玩它，但它至少是一个起点

另外，我假设缩进为2个空格，因为您似乎正在使用它

---

哦，当你将它与

标记一起使用时，或者在CSS设置为保持HTML空白的任何地方使用时，你显然需要小心。

我认为你在寻找

内部文本
或
文本内容
（FF）.？@Joshrike不，我不是。我更新了问题，使我需要的内容更加清晰。我想你在找
innerText
或
textContent
（FF）.？@joshstrike不，我不是。我更新了这个问题，以使我所需要的更加清楚。是否有一种方法可以根据其层次结构动态地格式化每一行，就像对HTML放入
正文中的元素所做的那样？我更新了我的问题，使其更加清晰。是否有一种方法可以根据其层次结构动态格式化每一行，就像对HTML放入
正文中的元素所做的那样？我更新了我的问题，使之更清楚+1非常好，这是我想的方法，但我自己无法正确创建它（使用
“\n”
比我尝试的更容易）。一件小事：当将一个元素附加到与现有元素相同的级别时，会出现一个不必要的空行。有没有一个简单的方法来消除这个问题？太好了，谢谢！如果没有人想出一个更干净的解决方案（可能意味着以某种方式使用默认的append），那么悬赏将是yours@Zeaklous嘿，在睡了一会儿之后，我更新了我的答案，使用
。appendChild
再次，当存在兄弟元素时，第二级中有不必要的空格。删除第三个
appendChild
行将删除该行，但也会删除级别最后一个子级上所需的换行符。我会使用一个简单的
nextSibling
检查来解决这个问题，如果它为空，那么就给它换行符，但是由于每个元素都是在另一个元素之后追加的，所以这不起作用。在所有的元素都被追加之后，我是否必须做一个检查，或者你能想出一个更好的解决方法吗？用<代码> /\r\\n\r\g.Test..（…<代码>）来检测断线删除空白行，但是弄乱了一些缩进，你知道为什么吗？+ 1非常好，这就是我所想的方法，但是不能正确地创建它。（使用
“\n”
比我尝试的更简单）。一件小事：当将一个元素附加到与现有元素相同的级别时，会出现不必要的空行。有没有简单的方法删除它？很好，非常感谢！如果没有人想出更干净的解决方案（可能意味着以某种方式使用默认的附加）那么赏金就会被没收yours@Zeaklous嘿，睡了一会儿后，我更新了我的答案，使用了
。appendChild
，再次，当存在兄弟元素时，第二级中有不必要的空格。删除第三行
appendChild
会删除它，但也会删除级别最后一个子级上需要的换行符。我会使用一个简单的检查来解决这个问题，如果它为空，那么就给它换行符，但是由于每个元素都是在另一个元素之后追加的，所以这不起作用。我必须在所有元素都追加后进行检查，还是你能想出更好的解决方法？使用
/\r？\n |\r/g.test（…）检测断线删除了空白行，但弄乱了一些缩进，知道为什么吗？