title: Insert sibling node in JS
body: <p>So I have a div with some pre tags in it, like so:</p>
  
  <pre><code>&lt;div id="editor" &gt;
      &lt;pre contentEditable="true"&gt;1&lt;/pre&gt;
      &lt;pre contentEditable="true"&gt;2&lt;/pre&gt;
      &lt;pre contentEditable="true"&gt;3&lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to use Javascript to put a new <code>pre</code> node between 1 and 2. I've been trying to do it this way (since I understand the DOM is a doubly linked tree), but I'm getting the sense that maybe the pointers aren't editable as I'm approaching it.</p>
  
  <p>(just a snippet inside an event handler, <code>e</code> being the event)</p>
  
  <pre><code>var tag = e.srcElement;
      if(tag.nextSibling){
          var next = tag.nextSibling;
          var newPre = document.createElement('pre');
          newPre.setAttribute("contentEditable", "true");
          newPre.innerHTML = "boom";
          tag.nextSibling = newPre;
          newPre.nextSibling = next;
      }
  </code></pre>
  
  <p>Those last two lines are from my c++ experience, but feel icky in JS. How would I set a new sibling node?</p>