title: How can I insert a DIV *between* an existing parent and child?
body: <p>Suppose I have a partial dom tree with a parent node and a set of children. </p>
  
  <p>How can I interject a DIV between them?</p>
  
  <p>I am starting with</p>
  
  <pre><code>parent --+--&gt; child[0]
           |--&gt; child[1]
           |--&gt; child[2]
  </code></pre>
  
  <p>..and I want to end with</p>
  
  <pre><code>parent ---&gt; newdiv ---+--&gt; child[0]
                        |--&gt; child[1]
                        |--&gt; child[2]
  </code></pre>
  
  <p>How can I do this? </p>
  
  <p>I need the converse of <code>replaceChild()</code> .  Is there something like <code>replaceParent()</code> ?</p>
  
  <p>I suppose I could clone all the child nodes, and then insert them as children in the new node.   but... does that retain all the element ids?  </p>
  
  <hr>
  
  <p><strong>EDIT</strong> - I didn't tag this with jQuery, or any framework, but maybe I should have been explicit about it. This is not a jQuery question. I want to do this in javascript  + DHTML. No extra or outside framework. </p>