document.createElement fails for new window
<p>I have two HTML files, FirstWindow and SecondWindow. FirstWindow has FirstWindowJS.js as its script and SecondWindow has SecondWindowJS.js as its script.</p>

<p>Through FirstWindowJS.js, I open SecondWindow.html. However, I am unable to create an element for it. Here's the code along with the problem - </p>

<p>FirstWindow.html</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;title&gt;FirstWindow&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript" src="FirstWindowJS.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>SecondWindow.html</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;title&gt;SecondWindow&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript" src="SecondWindowJS.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>FirstWindowJS.js</p>

<pre><code>main();

function main()
{
    var myWindow = window.open("SecondWindow.html", "My Window", 
    "resizable=0,width=700,height=600");

    var e = myWindow.document.createElement("currentUserElement");
    e.setAttribute("id", "currentUserElement");
    e.setAttribute("value","John");
}
</code></pre>

<p>SecondWindowJS.js</p>

<pre><code>main();

function main()
{
     var e = document.getElementById("currentUserElement"); 
     var value = e.getAttribute("value");
     console.log("value = "+value);
}
</code></pre>

<p>The error that I get in the SecondWindowJS.js is - </p>

<pre><code>TypeError: e is null 
</code></pre>

<p>Why is "e" null? What is the mistake?</p>
