Insert elements after each image with a specific class using plain javascript

Question

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):

//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);
  }
}

<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.

Open your browser console and check for errors. If you don't understand `javascript` but wish to use it then I suggest you learn some of the basics or research keywords from the javascript you are using, that could help you understand the actions in those functions. — NewToJS, Aug 26 '17 at 18:49

score 2 · Accepted Answer · answered Aug 26 '17 at 18:53

You can use querySelectorAll to find elements with a specific tag and class in the same way as jQuery:

var imgs = document.querySelectorAll("img.img-caption");

I've also changed:

insertAfter(imgs[i], NewSpan);

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

function inserCaption() {
  var imgs = document.querySelectorAll("img.img-caption");

  for (var i = 0; i < imgs.length; i++) {
    var NewSpan = document.createElement("span");
    var Caption = imgs[i].getAttribute("title");
    NewSpan.innerHTML = Caption;
    
    insertAfter(imgs[i], NewSpan);
  }
}

<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>

This works great, and since you didn't do an overhaul on it I understand the changes made! How would I go about adding a class to the newly created spans tho? Right now I tried adding `NewSpan.className += " spanclass";` which does work, but doesn't look that sleak. — stacked-cabbages, Aug 26 '17 at 19:26
@Dut You can also use the `NewSpan.classList.add("spanclass");` which, imo, is pretty much the same as what you've suggested. — Nelson Yeung, Aug 26 '17 at 23:16

Nianyi Wang · Answer 2 · 2017-08-27T11:30:55.277

1

function insertAfter(target, node) {
    let parent = target.parentNode;
    if(target.nextSibling !== null)
        parent.insertBefore(target.nextSibling, node);
    else
        parent.appendChild(node);
}

edited Aug 27 '17 at 11:30

answered Aug 26 '17 at 18:48

Nianyi Wang

712
6
13

Regarding the CSS-solution. I don't think pseudo elements works for img, which is the reason why I turned to javascript. I just tried this and it didn't seem to have any effect, please let me know if this shouldn't be the case though. – stacked-cabbages Aug 26 '17 at 19:08
@Dut sorry, my fault, I didn't even tested the CSS code ;_; – Nianyi Wang Aug 27 '17 at 11:31

score 0 · Answer 3 · answered Aug 26 '17 at 18:52

function applyCaption(image, index) {
  const caption = document.createElement('span');
  
  caption.classList.add('caption');
  caption.textContent = image.title;

  
  return image
    .parentNode
    .insertBefore(caption, image.nextSibling)
  ;
}

function inserCaption() {
  
  return Array
    .prototype
    .forEach
    .call(document.querySelectorAll('img'), applyCaption)
  ;
}

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

<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"/>

Insert elements after each image with a specific class using plain javascript

3 Answers3