使用缩进/间距将元素附加到DOM [英] Appending elements to DOM with indentation/spacing

问题描述

以下是一个示例 。检查控制台的结果。前两个 div s（未附加;在控制台中的< script> 之上）具有适当的间距并且缩进。然而，后面两个 div s并不显示与原始格式相同的格式或空白区域，即使它们完全相同，但会被追加。

Here is an example. Check the console for the result. The first two divs (not appended; above the <script> in the console) have the proper spacing and indention. However, the second two divs do not show the same formatting or white space as the original even though they are completely the same, but appended.

例如输入

For example the input

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 （或可能类似的方法）？我需要能够直观地显示我正在处理的页面的层次结构和结构。

Is there any way to generate the proper white space between appended elements and retain that spacing when obtaining it using innerHTML (or a possible similar means)? I need to be able to visually display the hierarchy and structure of the page I'm working on.

我试着将它追加到实际HTML中的一个元素中，但它具有相同的行为

I have tried appending it within an element that is in the actual HTML but it has the same behavior

我可以用lincolnk建议的文本节点和换行符来完成它，但它需要影响动态结果，这意味着我不能使用相同的 .createTextNode（'< / br>）因为不同的元素处于不同层次的层次结构中

I'd be okay with doing it using text nodes and line breaks as lincolnk suggested, but it needs to affect dynamic results, meaning I cannot use the same .createTextNode(' </br>') because different elements are in different levels of the hierarchy

没有jQuery请求

推荐答案

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

I think you're asking to be able to append elements to the DOM, such that the string returned from document.body.innerHTML will be formatted with indentation etc. as if you'd typed it into a text editor, right?

如果是这样的话，可能会有这样的效果：

If so, something like this might work:

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

我没有太多的想法，所以你可能需要玩它，但至少是一个起点。

I've not put too much thought into it, so you might need to play with it, but it's a starting point at least.

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

Also, i've assumed an indentation of 2 spaces as that's what you seemed to be using.

哦，在使用<$ c $时显然需要小心c>< pre> 标记或设置CSS的任何位置以维护HTML的空白。

Oh, and you'll obviously need to be careful when using this with a <pre> tag or anywhere the CSS is set to maintain the whitespace of the HTML.

这篇关于使用缩进/间距将元素附加到DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！