title: Replace text nodes
body: <p>I'm trying to replace these two text nodes with each other. It suppose to be like a correction verification. What its suppose to do is to see if the input is correct after you focus on another input. </p>
  
  <p>This is the html </p>
  
  <pre><code>&lt;body&gt;
  &lt;form action="" method="post" name="myform"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Lab Group Form&lt;/legend&gt;
                  &lt;label for="first_name"&gt;First Name:&lt;/label&gt;
                  &lt;br/&gt;
              &lt;input id="first_name" type="text" name="first_name_text" value="" onblur="validatefirst()" /&gt;
                      &lt;br/&gt;&lt;br/&gt;
            &lt;/fieldset&gt;
  &lt;/form&gt; 
  
   &lt;div class="one" id="one"/&gt;
   &lt;div class="two" id="two"/&gt;
  &lt;/body&gt;
  
  
  
      function validatefirst() {
          if (document.myform.first_name.value.length &gt; 0) {
              var one = document.createTextNode("Correct");
              var one_container = document.getElementById("one");
  
          } else {
              var two = document.createTextNode("Incorrect.");
              var two_container = document.getElementById("two");
              two_container.appendChild(two);
          }
      }
  </code></pre>
  
  <p>this is the css file:  </p>
  
  <pre><code>.one { 
      color:#000; 
      position:absolute; 
      top:400px;
  }
  
  
  .two{ 
      color:#000; 
      font-family:Arial, Helvetica, sans-serif; 
      font-size:14px; 
      position: absolute; 
      top:400px; 
  } 
  </code></pre>
  
  <p>So if you can help me out that will be great. Please no jquery. Thank you </p>