Appending elements to DOM with indentation/spacing

Question

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

Gives the output

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

When I want it to look like

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

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.

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

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

No jQuery please

Answer 1

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

}

demo: 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.

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

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.

Answer 2

You can use document.createTextNode() to add a string directly.

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