Insert new element as sibling of inline element
<p>I have got a list full of items that contain <code>img</code> tags with some text inside of them.</p>

<p>I am trying to insert a <code>&lt;br&gt;</code> tag between the end of the img tag and text node before the closing <code>&lt;li&gt;</code> tag.</p>

<p>So each li item should look like:</p>

<pre><code>&lt;li&gt;&lt;img&gt;&lt;br&gt;Text&lt;/li&gt;
</code></pre>

<p>I want the code to be strictly JavaScript - <strong>no libraries</strong>.</p>

<p>My JavaScript begins like this:</p>

<pre><code>var images = [];
// get all the images on the page
images = document.getElementsByTagName("img");
// create br element
var br = document.createElement("br");

for (var i = 0; i &lt; images.length; i++) {
    // loop through all the image tags and 
    // append br element as first sibling as img
}
</code></pre>

<p>I have tried the following inside the <code>for</code> loop</p>

<ul>
<li><code>images[i].parentNode.insertBefore(br, images[i].nextSibling);</code></li>
<li><code>images[i].appendChild(br);</code></li>
</ul>

<p>Here's a snippet of the HTML:</p>

<pre><code>&lt;div&gt;
    &lt;ul&gt;
        &lt;li role="button"&gt;&lt;img src="icons/home.png" alt="Home icon" height="24" width="24"/&gt;Home&lt;/li&gt;
        &lt;li role="button"&gt;&lt;img src="icons/pan-map.png" alt="Pan Map icon" height="24" width="24"/&gt;Pan Map&lt;/li&gt;
        &lt;li role="button"&gt;&lt;img src="icons/initial-map-view.png" alt="Initial Map View icon" height="24" width="24"/&gt;Initial View&lt;/li&gt;
        &lt;li role="button"&gt;&lt;img src="icons/zoom-in.png" alt="Zoom In icon" height="24" width="24"/&gt;Zoom In&lt;/li&gt;
        &lt;li role="button"&gt;&lt;img src="icons/zoom-out.png" alt="Zoom Out icon" height="24" width="24"/&gt;Zoom Out&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Edit:</strong> The above script is for use in IE7 which does not support <code>display: inline-block</code>, therefore in this case, CSS cannot be relied upon for a solution</p>