Javascript: non-effective replaces causes problems
<p>i have this simple code which is replacing the first span with a div ,</p>

<p>here is LIVE examples :</p>

<ol>
<li>the original working one : <a href="http://jsfiddle.net/SNmLJ/5/" rel="nofollow">http://jsfiddle.net/SNmLJ/5/</a></li>
<li>the one with the changes : <a href="http://jsfiddle.net/SNmLJ/6/" rel="nofollow">http://jsfiddle.net/SNmLJ/6/</a></li>
</ol>

<p>-</p>

<pre><code>var pn = "parentNode" , rc = "replaceChild";
var elem = document.getElementsByTagName('span')[0];
var newE = document.createElement('div');

newE.innerHTML = 'test';
elem[pn][rc](newE , elem);
</code></pre>

<p>the code is perfectly working , so i tried to short the code a bit so i did this :</p>

<pre><code>var pn = "parentNode" , rc = "replaceChild";
var newE = document.createElement('div');

newE.innerHTML = 'test';
document.getElementsByTagName('span')[0][pn][rc](newE , elem);
</code></pre>

<p>as you see i took the "elem" var out and replace the value in the bottom of the code ,
i don't know why it's not working but i guess the problem is causes of the "document" object in the first of the line.</p>

<ul>
<li>single question : why it's not working properly , what have been gone wrong here?</li>
</ul>
