I'm basically trying to add a caption below every `img` element with the class name `img-caption` using plain javascript. I've found some solutions, but they all use jQuery and I'm looking for a plain javascript solution.

What I have is this non-working code at the moment (modified from [this question](https://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library)):

```js
//insertAfter() needs to be updated
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function inserCaption() {

  var imgs = document.getElementsByTagName("img");

  for (var i = 0; i < imgs.length; i++) {
    var NewSpan = document.createElement("span");
    var Caption = document.getElementsByTagName("img")[i].getAttribute("title");
    NewSpan.innerHTML = Caption;
    var ImgTag = document.getElementsByTagName("img");
    //I need a function inserAfter() to insert the titles after each image
    insertAfter(ImgTag, NewSpan);
  }
}
```

```html
<img title="Hi" class="img-caption" src="http://i.imgur.com/KnX16nj.png"/>

<img title="Hello" class="img-caption" style="height:126px; width: auto;" src="http://i.imgur.com/naajTCH.png"/>

<button style="display:blocK" onclick="inserCaption()">Display Image Title</button>
```

So far I've been able to select all `img` elements and get their `title` attributes. What I'm missing is selecting `img` with specific class name `img-caption` and **more importantly, how to actually insert the corresponding** `title` **attribute after each** `img` **as a** `span` **element.**

Since I only modified an existing work, I don't really know how `insertAfter()` works. I'm less than a beginner when it comes to javascript, just to clarify.