使用普通 javascript 在每个图像后插入具有特定 class 的元素

Question

我基本上是在尝试使用普通 javascript 在每个 class 名称 img-caption 的 img 元素下方添加标题。我找到了一些解决方案，但它们都使用 jQuery，我正在寻找一个简单的 javascript 解决方案。

我目前拥有的是这个 non-working 代码（从 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>

到目前为止，我已经能够 select 所有 img 元素并获得它们的 title 属性。我缺少的是 selecting img 具有特定的 class 名称 img-caption 和 更重要的是，如何实际插入相应的 title 属性在每个 img 作为 span 元素之后。

由于我只修改了现有的作品，所以我真的不知道insertAfter()是如何工作的。在 javascript 方面，我还不是初学者，只是为了澄清一下。

Answer 1

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

Answer 2

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

Answer 3

您可以使用 querySelectorAll 查找具有特定标签和 class 的元素，方法与 jQuery:

相同

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

我也改了：

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>

使用普通 javascript 在每个图像后插入具有特定 class 的元素

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

html

javascript

dom

web-frontend