プレーンJavaScriptを使用して特定のクラスの各イメージの後に要素を挿入します

Question

基本的には、img要素の下に、プレーンJavaScriptを使用してクラス名img-captionのキャプションを追加しようとしています。私はいくつかのソリューションを見つけましたが、それらはすべてjQueryを使用しており、私はプレーンなjavascriptソリューションを探しています。

私は何を持っていること（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>

これまでのところ、私はすべてのimgの要素を選択し、自分のを得ることができましたtitle属性。私はもっ​​と重要なのは、特定のクラス名img-captionとでimgを選択している欠けている、どのように実際にspan要素として各img後の対応title属性を挿入します。

私は既存の作品だけを変更して以来、私は実際にどのようにinsertAfter()が動作するか分かりません。私は初心者よりもjavascriptの場合は、明確にするために来ています。私も変更した

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

：

Answer 1

あなたはjQueryのと同じように特定のタグとクラスを持つ要素を見つけるためにquerySelectorAllを使用することができます

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>

Answer 2

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

Answer 3

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