开发者问题收集

如何在 JavaScript 中附加新元素?

2009-04-17
3850

我创建了一个 JavaScript 脚本,可以将其粘贴到某人的页面上以创建 iFrame。我希望此人能够将脚本粘贴到他们希望 iFrame 出现的位置。

但是,我不知道如何将 DOM 创建的 iFrame 附加到粘贴脚本的位置。它总是将其附加到正文的最底部。

如何就地附加?

3个回答

嗯。您可以这样做:

document.write("<div id='iframecontainer'></div>");
document.getElementById('iframecontainer').innerHTML = '...';

但是,这在很多不同层面上都让人感觉不好看/不对劲。不过,我不知道还有其他替代方案。

编辑 :实际上,快速谷歌搜索发现了 这篇文章 ,其中讨论了为什么 document.write 不好看,以及针对您所处的特定困境的一个很好的替代方案:为您的 script 标签添加一个ID!

<script id="iframeinserter" src=".."></script>

然后,您可以获取对脚本标签的引用并在其前面插入 iframe:

var newcontent = document.createElement('iframe'); 
var scr = document.getElementById('iframeinserter'); 
scr.parentNode.insertBefore(newcontent, scr); 
Paolo Bergantino
2009-04-17

Paulo 的答案也可以不使用 ID,只需查找最后一个 <script> 元素即可。这必须是我们所在的脚本块,因为 JavaScript 保证当前脚本块结束标记之后的所有内容都尚未解析 (*):

 var scripts= document.getElementsByTagName('script');
 var script= scripts[scripts.length-1];
 script.parentNode.insertBefore(d, script);

如果您愿意,可以将其放在 onload/ready 函数中,但如果这样,则必须在包含时计算“var script”,而不是在 ready 函数中计算(执行时,将解析更多 <script>)。

(*:<script defer> 的情况除外。)

bobince
2009-04-18

如果用户可以给出 iframe 所在位置的元素的 id,那么就可以使用 css 将 iframe 移动到页面上应在的位置。

James Black
2009-04-17