如何'hijack' iframe 标签并放入 div？

Question

我需要一些帮助。我的目标是获取页面中的iframe标记，并使用javascript将其放入页面上没有的div中

我所拥有的：

var iframes = document.querySelectorAll('[data-name="youtube"]')
for (var i = 0; i < iframes.length; i++) {
var iframe = iframes[i];
var createWrapper = document.createElement('div');
createWrapper.setAttribute('id','youtubeVideo');
iframe.style = "width:560; height:315 ; position: relative; border: none;"
createWrapper.outerHTML = iframe.outerHTML.replace('data-src', 'src')
}

我有一个错误，说"；元素没有父节点"；。。。目标只是将这个iframe封装在div上，这样我就可以通过javascript赋予它样式。。。我没有访问该页面的权限，所有这些都需要通过这个脚本完成。。。

期望的结果是：

<div id="youtubeVideo">
<iframe ....> </iframe>
</div>

有人能帮忙吗？

提前感谢！

Answer 1

您需要将新的div附加到DOM

document.body.append(createWrapper);

var iframes = document.querySelectorAll('[data-name="youtube"]')
for (var i = 0; i < iframes.length; i++) {
var iframe = iframes[i];
var createWrapper = document.createElement('div');
document.body.append(createWrapper);
createWrapper.setAttribute('id', 'youtubeVideo');
iframe.style = "width:560; height:315 ; position: relative; border: 2px solid #333;"
createWrapper.outerHTML = iframe.outerHTML.replace('data-src', 'src')

// remove orig 
iframe.parentNode.removeChild(iframe)
}

<iframe data-name="youtube" data-src='123'></iframe>