創建並向所有現有目標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。