如何按条件为元素添加/移除包裹结构（兼容IE且不修改现有CSS）

这个问题我之前也碰到过，没法修改现有CSS还要兼容IE确实挺棘手的，给你几个实用的方案，你可以根据自己的项目场景来选：

1. 原生JavaScript动态处理（兼容IE） #

这个方案适合纯静态页面或者没有用前端框架的场景，完全用原生DOM API操作，IE11也能完美支持：

先获取目标元素，然后根据条件判断是否需要添加或移除wrapper：

// 获取你的自定义组件元素
const myComponent = document.querySelector('my-component');
// 替换成你的实际条件判断逻辑
const shouldWrap = /* 比如：someVariable === true */;

if (shouldWrap) {
  // 先检查是否已经被wrapper包裹了，避免重复操作
  if (!myComponent.parentElement || myComponent.parentElement.className !== 'wrapper') {
    const wrapper = document.createElement('div');
    wrapper.className = 'wrapper';
    // 把wrapper插入到组件之前，再把组件移到wrapper里
    myComponent.parentNode.insertBefore(wrapper, myComponent);
    wrapper.appendChild(myComponent);
  }
} else {
  // 如果当前组件在wrapper里，就把它移出来并删除wrapper
  const parent = myComponent.parentElement;
  if (parent && parent.className === 'wrapper') {
    parent.parentNode.insertBefore(myComponent, parent);
    parent.remove();
  }
}

这个方法完全不需要修改现有CSS，兼容性拉满，不会有IE适配问题。

2. 前端框架场景（Vue/React等） #

如果你用的是现代前端框架，那条件渲染就是最省心的方案，框架会自动帮你添加或移除整个wrapper元素：

Vue示例： #

<template>
  <div>
    <div class="wrapper" v-if="shouldWrap">
      <my-component></my-component>
    </div>
    <my-component v-else></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shouldWrap: /* 你的条件判断 */
    }
  }
}
</script>

React示例： #

function App() {
  const shouldWrap = /* 你的条件判断 */;
  
  return (
    <div>
      {shouldWrap ? (
        <div className="wrapper">
          <MyComponent />
        </div>
      ) : (
        <MyComponent />
      )}
    </div>
  );
}

框架的条件渲染会直接根据shouldWrap的值渲染对应的结构，完全符合你“要么有wrapper要么没有”的需求，代码也更简洁易维护。

3. 服务器端渲染（SSR）场景 #

如果你的页面是后端生成的（比如PHP、Node.js模板），那直接在后端根据条件输出对应的HTML结构就行：

PHP示例： #

<?php
// 你的条件判断逻辑
$shouldWrap = true;
?>

<?php if ($shouldWrap): ?>
  <div class="wrapper">
    <my-component></my-component>
  </div>
<?php else: ?>
  <my-component></my-component>
<?php endif; ?>

这种方式生成的HTML完全符合要求，前端不需要做任何额外处理，也不会有兼容性问题。

内容的提问来源于stack exchange，提问作者Christian Vincenzo Traina