Javascript 如何将以逗号分隔的URL列表拆分为各个iFrame？（jQuery）

我试图弄清楚如何在src属性中拆分一个逗号分隔的URL列表，并将每个URL放在各自的iFrame中。我使用的应用程序不允许使用多个iFrame元素，所以我想知道是否有办法通过JavaScript或jQuery来实现这一点

当前语法：

<iframe name="target" src="https://www.youtube.com/embed/111,https://www.youtube.com/embed/222" width="100%" height="100" frameborder="0" scrolling="auto"></iframe>

我正在努力实现的目标：

<iframe name="target" src="https://www.youtube.com/embed/111" width="100%" height="100" frameborder="0" scrolling="auto"></iframe>
<iframe name="target" src="https://www.youtube.com/embed/222" width="100%" height="100" frameborder="0" scrolling="auto"></iframe>

您还需要隐藏原始元素，因为它没有有效的src

---

你试过什么吗？记得在问问题之前在谷歌或其他网站上搜索解决方案，有些问题很容易找到解决方案，如以下搜索结果：

// Iframe element with a placeholder for src property.
var urlTemplate = '<iframe name="target" src="{0}" width="100%" height="100" frameborder="0" scrolling="auto"></iframe>'

// Get both youtube sources and add to array. 
var sources = $('iframe').attr('src').split(',')

// Loop through the links in sources and append a video iframe to the output div.
for (var i = 0; i < sources.length; i++) {
    $('.output').append(urlTemplate.replace('{0}', sources[i]));
}