如何用JavaScript将iframe包裹在center标签中（解决代码失效问题）

一、JavaScript脚本失效的核心原因 #

你调用wrap函数时，document.querySelector('xiframe')是错误的选择器——这是在寻找名为<xiframe>的自定义标签，而你的iframe的id是xiframe，正确的选择器应该是#xiframe（id选择器），或者用.xiframe（类选择器）来定位目标元素。

二、修正后的JavaScript代码 #

function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

// 用id选择器定位iframe，再用center标签包裹
wrap(document.querySelector('#xiframe'), document.createElement('center'));

三、补充：CSS方案失效原因及正确写法 #

你写的align:center不是有效的CSS属性，块级元素实现水平居中的标准写法是用margin: 0 auto;，同时需确保父容器有足够的可用宽度。修正后的CSS代码：

iframe {
  display:block;
  border: 3px dotted;
  width: 300px;
  height: 300px;
  margin: 0 auto; /* 替换无效的align:center */
}

四、额外规范说明 #

<center>标签属于HTML4的废弃标签，从语义化和现代Web规范角度，更推荐使用CSS方式实现居中布局，而非依赖废弃标签。如果业务需求必须用JavaScript包裹标签，上述修正后的代码可正常生效。

内容的提问来源于stack exchange，提问作者Learning