JavaScript to Empty Something

MartinRinehart

In my tutorial I've this little loop:


 while ( div.hasChildNodes() ) { // empty the div
        div.removeChild( div.firstChild );

This works, but is it just the hard way to do this:


div.innerHTML = ''

?

Jim

Completely different things, no? One is removing child nodes from a container element, the other is setting the value of a property of an element.

MartinRinehart

They are the same:


<html><body>

<h1> Headline </h1>

<button onclick='dump1()'> Dump1 </button>
<button onclick='dump2()'> Dump2 </button>

<script>

function dump1() {
    alert( document.body.hasChildNodes() );
    document.body.innerHTML = '';
    alert( document.body.hasChildNodes() );
}

function dump2() {
    alert( document.body.innerHTML );
    while ( document.body.hasChildNodes() ) {
        document.body.removeChild( document.body.firstChild );
    }
    alert( '[' + document.body.innerHTML + ']' );
}

</script>

</body></html>

thomthom

The former used to be the W3C standard way. The latter used to be the non-standard. But as of HTML5 I believe innerHTML and outerHTML are now standard.
Pretty well supported anyway.