How to create an element and move an existing element into it in native Javascript?
<p>My goal is to create an element to serve as a placeholder of an existing element. For styling purposes I need to move the element right after another element (position: absolute is not a good solution) so I can set the position dynamic. </p>

<p>My problem is the markup is generated by javascript and the only option I have is to tweak it via javascript also. It is a third party widget that I need to override. </p>

<p>Current markup:</p>

<pre><code>&lt;li class="..."&gt;

  &lt;a class="time" href="...." &gt;
    &lt;time pubdate="" class="..."&gt;...&lt;/time&gt;
  &lt;/a&gt;

  &lt;div class="..."&gt;
    ...
  &lt;/div&gt;

  &lt;div class="..."&gt;
    ...
  &lt;/div&gt;

  &lt;div class="bottom-wrapper"&gt;
    &lt;span class="stats-container"&gt;
      &lt;span class="stats"&gt;
        &lt;span class="likes"&gt;    
          ...
        &lt;/span&gt;
        &lt;span class="favorites"&gt;   
          ...
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;
</code></pre>

<p></li></p>

<p>I want to move the <code>a.time</code> into a new span after <code>span.likes</code>.</p>

<p>Goal:</p>

<pre><code>&lt;li class="..."&gt;

  &lt;div class="..."&gt;
    ...
  &lt;/div&gt;

  &lt;div class="..."&gt;
    ...
  &lt;/div&gt;

  &lt;div class="bottom-wrapper"&gt;
    &lt;span class="stats-container"&gt;
      &lt;span class="stats"&gt;
        &lt;span class="likes"&gt;    
          ...
        &lt;/span&gt;
        &lt;span class="new-span"&gt;
          &lt;a class="time" href="...." &gt;
            &lt;time pubdate="" class="..."&gt;...&lt;/time&gt;
          &lt;/a&gt;
        &lt;/span&gt;
        &lt;span class="favorites"&gt;   
          ...
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/li&gt;
</code></pre>

<p>I need to do it in native javascript (No Jquery) for some reason.</p>

<p>My code:</p>

<pre><code>// Create a new, plain &lt;span&gt; element
var createElem = document.createElement('span');

// Get a reference to the element, before we want to insert the element
var containerElem = document.getElementsByClassName("likes");

// Get a reference to the parent element
var parentDiv = containerElem.parentNode;

// Insert the new element into the DOM after containerElem
parentDiv.insertBefore(createElem, containerElem.nextSibling);
</code></pre>

<p>However, the above code throw an error (please see below):</p>

<pre><code>Uncaught TypeError: Cannot call method 'insertBefore' of null 
Uncaught TypeError: Cannot call method 'insertBefore' of undefined 
</code></pre>

<p>Any idea how I can do this? Thanks</p>

<p><strong>EDIT: I have multiple LI as well. So I need to traverse all the LI in this script.</strong></p>
