Change text of first child
<p>I have code that suppose to find the first child (div) of a div and than change its content, here is my code:</p>

<pre><code>var headDiv = document.getElementById('sliderContainer');
var childDiv = headDiv.childNodes[0];
childDiv.innerHTML = 'Working';
</code></pre>

<p>that seems to not working, what's the problem here?</p>

<p>live : <a href="http://jsbin.com/aqozef/edit#javascript,html,live" rel="nofollow">http://jsbin.com/aqozef/edit#javascript,html,live</a></p>

<p>the full code :</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script type="javascript"&gt;
        function scrollit(){
            var headDiv = document.getElementById('sliderContainer');
            var childDiv = headDiv.childNodes[0];
            childDiv.innerHTML = 'Working';
        }
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
        #sliderContainer{width:100px;height:100px;overflow:hidden;}
        .sliderContent{width:100px;height:100px;float:left;}
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="sliderContainer"&gt;
        &lt;div class="sliderContent" style="background-color:blue;"&gt;s&lt;/div&gt;
        &lt;div class="sliderContent" style="background-color:yellow;"&gt;a&lt;/div&gt;
    &lt;/div&gt;&lt;br/&gt;&lt;br/&gt;
    &lt;button onclick="scrollit();"&gt;scroll it&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
