add element with DOM model before paragraph
<p>I want add new input text before paragraph. But it working opposite add after text.<br>
What is wrong at this code?<br>
I use <code>document.getElementById("p1").insertBefore(node);</code> with this aim, but without success. Why does this happen?</p>

<p><strong>Code:</strong></p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Adding text to a page&lt;/title&gt;
            &lt;script&gt;
                function addText() {
                    var sentence=document.form1.sentence.value;
                    var node=document.createTextNode(sentence + " ");
                    document.getElementById("p1").insertBefore(node);
                }
            &lt;/script&gt;
    &lt;/head&gt; 
        &lt;body&gt;
            &lt;h1&gt;Create Your Own Content&lt;/h1&gt;
            &lt;p id="p1"&gt;Using the W3C DOM, you can dynamically
                add sentences to this paragraph. Type a sentence
                and click the Add button.&lt;/p&gt;       
            &lt;form name="form1"&gt;
                &lt;input type="text" name="sentence" size="65"&gt;
                &lt;input type="button" value="Add" onClick="addText();"&gt;
            &lt;/form&gt;
        &lt;/body&gt;    
&lt;/html&gt;
</code></pre>

<p><strong>Question:</strong>  </p>

<ul>
<li>How to solve this issue?</li>
</ul>
