Question

I’ve got a div with two children, one <h2> and one <ul>.

My problem is that when I check .length of my div, by doing document.getElementById('wrap').childNodes.length, I get 5 instead of 2. And if I run console.log on childNodes I get this:

[<TextNode textContent="\n ">, h2, <TextNode textContent="\n ">, ul, <TextNode textContent="\n ">]

My HTML looks like this:

<div id="wrap">
    <h2>Lorem</h2>
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
    </ul>
</div>

Indenting my code has never before affected the length of the childNodes.

If I type everything on one row (as one long word) I get rid of all <TextNode> and it counts to 2 as it should and not 5.

I’ve got no idea what’s wrong, but I figured I need to remove all empty textnodes.
Which way would be the best to do this?

Thanks heaps

Ps. These <TextNode textContent="\n "> occurs all over the document, so I need to remove them all, not only in this particular div.

Answer 1

Firefox, right? Firefox will treat whitespace as a textnode. There’s nothing you can do about it apart from code around them. Or, you could completely get rid of all whitespace, but I’m betting that’s not an option. It’s part of what makes writing webpages so, er, fun 🙂