既存のすべてのターゲットdivにiframeを作成して追加し、src属性を設定する

Question

.thumbnail.excerpt divにiframeを作成して追加したい場合はa要素からのリンクでsrc属性を設定します。私はjQueryでこれを行うことができましたが、バニラのJSソリューションを探していました。

バニラJSは私の強い訴えではありませんでしたが、これまでDOMの最初の要素にiframeを追加することができました。DOMのすべてのターゲット要素にiframeを追加するにはどうすればよいですか？

var el = document.querySelector('.thumbnail-excerpt'); 
 
el.innerHTML += '<iframe itemprop="video" class="video-embed" src=”video” width="100%" height="100%" allowfullscreen=""></iframe>';

<div class="thumbnail-excerpt"> 
 
    <a class="colorbox cboxElement" href="http://www.example.com"></a> 
 
</div> 
 

 
<div class="thumbnail-excerpt"> 
 
    <a class="colorbox cboxElement" href="http://www.example.com"></a> 
 
</div>

Answer 1

私は、これはあなたのニーズを満たすものです願っています。

<script type="text/javascript"> 
    var thumbnails = document.getElementsByClassName('thumbnail-excerpt'); 
    var thumbnail, videoLink, finalContent; 
    var insertPattern = '<iframe itemprop="video" class="video-embed" src="[video-link]" width="100%" height="100%" allowfullscreen=""></iframe>'; 
    for (var i = 0; i < thumbnails.length; i++) { 
     thumbnail = thumbnails[i]; 
     videoLink = thumbnail.children[0].href; 
     finalContent = insertPattern.replace('[video-link]', videoLink); 
     if (typeof thumbnail.innerHTML == 'undefined') { 
      thumbnail.innerHTML = finalContent; 
     } else { 
      thumbnail.innerHTML += finalContent; 
     } 
    } 
</script> 

Html変更なし。