title: removing and appending a node
body: <p>I want to remove below <code>span</code> elements from the <code>div</code> (<code>&lt;div id='foo'&gt;</code>) and append newly created nodes instead each of them.</p>
  
  <p>I am using a loop to traverse all the children of the <code>div</code>, and for each node found I am removing it with <code>removeChild</code> and append an newly created node.</p>
  
  <p>I am getting o/p as</p>
  
  <pre><code>&lt;div id='foo'&gt;
      &lt;SPAN&gt;new text&lt;/SPAN&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the o/p as follows</p>
  
  <pre><code> &lt;div id='foo'&gt;
      &lt;SPAN&gt;new text&lt;/SPAN&gt;
      &lt;SPAN&gt;new text&lt;/SPAN&gt;
      &lt;SPAN&gt;new text&lt;/SPAN&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Code for the problem is as follows</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;HTML&gt;
   &lt;HEAD&gt;
    &lt;TITLE&gt; New Document &lt;/TITLE&gt;
    &lt;META NAME="Generator" CONTENT="EditPlus"&gt;
    &lt;META NAME="Author" CONTENT=""&gt;
    &lt;META NAME="Keywords" CONTENT=""&gt;
    &lt;META NAME="Description" CONTENT=""&gt;
   &lt;/HEAD&gt;
  
  &lt;BODY&gt;
  &lt;div id='foo'&gt;
      &lt;SPAN&gt;welcome to the world of translation.&lt;/SPAN&gt;
      &lt;SPAN&gt;Thank you for using it&lt;/SPAN&gt;
      &lt;SPAN&gt;visit again&lt;/SPAN&gt;
  &lt;/div&gt;
  &lt;table border="0" cellspacing="5" cellpadding="0" class="lipi-header-logo-menu"&gt;
          &lt;tr&gt;
              &lt;td align="left"&gt;
                  &lt;SPAN&gt;Hello&lt;/SPAN&gt;
              &lt;/td&gt;
              &lt;td align="left"&gt;
                  World is not enough
              &lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div&gt;&lt;a href="aa" id="id"&gt;this is a test&lt;/a&gt;&lt;/div&gt;
  
  &lt;script&gt;
  var element = document.getElementById('foo');
  
  seg = document.createElement('SPAN');
  root_1_SPAN_1_text = document.createTextNode('new text');
  seg.appendChild(root_1_SPAN_1_text);
  
  if (element.hasChildNodes())
   {
     var children = element.childNodes;
     for (var i = 0; i &lt; children.length; i++) 
     {
      if(children[i].nodeName=="#text")
      {
          continue;
      }
      element.removeChild(children[i]);
      element.appendChild(seg);
     };
   };
  
  
    &lt;/script&gt;
   &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>Thanks in advance</p>