David David - 5 months ago 13
Javascript Question

Insert new element as sibling of inline element

I have got a list full of items that contain

img
tags with some text inside of them.

I am trying to insert a
<br>
tag between the end of the img tag and text node before the closing
<li>
tag.

So each li item should look like:

<li><img><br>Text</li>


I want the code to be strictly JavaScript - no libraries.

My JavaScript begins like this:

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 < images.length; i++) {
// loop through all the image tags and
// append br element as first sibling as img
}


I have tried the following inside the
for
loop


  • images[i].parentNode.insertBefore(br, images[i].nextSibling);

  • images[i].appendChild(br);



Here's a snippet of the HTML:

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


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

Answer

Using https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {
  images[i].insertAdjacentHTML('afterend', '<br/>')
}
<div>
  <ul>
    <li role="button">
      <img src="icons/home.png" alt="Home icon" height="24" width="24" />Home</li>
    <li role="button">
      <img src="icons/pan-map.png" alt="Pan Map icon" height="24" width="24" />Pan Map</li>
    <li role="button">
      <img src="icons/initial-map-view.png" alt="Initial Map View icon" height="24" width="24" />Initial View</li>
    <li role="button">
      <img src="icons/zoom-in.png" alt="Zoom In icon" height="24" width="24" />Zoom In</li>
    <li role="button">
      <img src="icons/zoom-out.png" alt="Zoom Out icon" height="24" width="24" />Zoom Out</li>
  </ul>
</div>