创建一个 iframe 并将其附加到所有现有的目标 div 并填充 src 属性

Question

我想创建一个 iframe 并将其附加到下面的 .thumbnail.excerpt div - 然后使用 a 元素中的 link 填充 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 无变化。

创建一个 iframe 并将其附加到所有现有的目标 div 并填充 src 属性

Create and append an iframe to all existing target divs and populate the src attribute

javascript

html

iframe