创建并向所有现有目标div添加iframe并填充src属性

Question

我想创建iframe并将其追加到下面的.thumbnail.excerpt div - 然后使用a元素的链接填充src属性。我设法用jQuery做到这一点，但寻找一个香草JS解决方案。

Vanilla JS不是我的强项，但到目前为止我设法将一个iframe附加到DOM中的第一个元素 - 我如何将iframe附加到DOM中的所有目标元素？

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 without changes。