Getting element node based on Javascript element based on position
<p>I am experimenting with a Javascript function which stuffs nodes into a position.  Something like <code>appendChild(document.getElementById("foo"))</code> .  However, I do not have full control over the surrounding code and it is likely that some elements will have identical IDs.  Consider the following:</p>

<pre><code>&lt;div id="foo"&gt;
&lt;span id = "bar"&gt;456&lt;/span&gt;
&lt;script type="text/javascript"&gt;document.write(document.getElementById("bar").innerText);&lt;/script&gt;
&lt;/div&gt;

&lt;hr&gt;

&lt;div id="foo"&gt;
&lt;span id = "bar"&gt;123&lt;/span&gt;
&lt;script type="text/javascript"&gt;document.write(document.getElementById("bar").innerText);&lt;/script&gt;
&lt;/div&gt;
</code></pre>

<p>In most browsers, the output will be:</p>

<pre><code>456 456 
123 456
</code></pre>

<p>rather than what I want, which is</p>

<pre><code>456 456 
123 123
</code></pre>

<p>This result is totally unsurprising to me; I do understand why this is happening.  I was hoping I could do a javascript call more like </p>

<pre><code>document.write(myscriptnode.parent.childnodes['bar'].innerText)
</code></pre>

<p><strong>Assuming I do not have control over anything except the contents of the script tags</strong>, is there a way to accomplish this?</p>
