Vanilla JS实现按钮切换元素：appendChild/removeChild替代display:none遇异常

嘿，我猜你遇到的问题是每次点击按钮时，都在创建新的<my-element>实例，而没有正确检测页面上已经存在的元素对吧？这就导致第一次点击添加后，后续点击没法移除反而不停新增副本。我来给你捋清楚怎么搞定这个~

问题根源 #

大概率是你的判断逻辑出了问题：比如每次点击都新建一个<my-element>，然后判断这个刚创建的新元素是否在DOM里——这肯定是不在的，所以每次都会执行appendChild，自然就重复了。正确的思路应该是先检查DOM中已经存在的目标元素，再决定是移除还是添加。

解决方案代码 #

1. 基础实现（每次查询DOM） #

这种方式简单直接，适合不需要复用元素实例的场景：

HTML 结构

<button id="toggle-btn">切换自定义元素</button>
<div id="element-container"></div>

JavaScript 代码

// 先定义自定义元素（如果还没定义的话）
class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<h3>我是自定义元素 <my-element></h3>';
    this.style.padding = '1rem';
    this.style.border = '1px solid #ccc';
  }
}
customElements.define('my-element', MyElement);

// 获取按钮和容器元素
const toggleBtn = document.getElementById('toggle-btn');
const container = document.getElementById('element-container');

// 绑定点击事件
toggleBtn.addEventListener('click', () => {
  // 关键：先查询DOM中已有的<my-element>
  const existingElement = document.querySelector('my-element');
  
  if (existingElement) {
    // 如果存在，从容器中移除
    container.removeChild(existingElement);
  } else {
    // 如果不存在，创建并添加到容器
    const newElement = document.createElement('my-element');
    container.appendChild(newElement);
  }
});

2. 优化实现（缓存元素实例） #

如果需要复用同一个元素实例（避免重复创建DOM节点），可以把实例缓存起来，性能更好，还能保留元素内部状态（比如输入框内容）：

// 定义自定义元素（同上）
class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<h3>我是自定义元素 <my-element></h3>';
    this.style.padding = '1rem';
    this.style.border = '1px solid #ccc';
  }
}
customElements.define('my-element', MyElement);

const toggleBtn = document.getElementById('toggle-btn');
const container = document.getElementById('element-container');
let myElementInstance = null; // 缓存元素实例

toggleBtn.addEventListener('click', () => {
  // 检查实例是否存在且在DOM中
  if (myElementInstance && container.contains(myElementInstance)) {
    // 移除元素
    container.removeChild(myElementInstance);
  } else {
    // 如果实例不存在，先创建；否则直接复用
    if (!myElementInstance) {
      myElementInstance = document.createElement('my-element');
    }
    container.appendChild(myElementInstance);
  }
});

关键要点 #

• 不要每次点击都创建新元素后判断：一定要先查询DOM中已存在的目标元素，这是解决重复创建的核心
• 移除元素时，可以用removeChild()（需要指定父容器）或者直接调用元素的remove()方法（更简洁，不需要父容器）
• 缓存实例的方式适合需要保留元素内部状态的场景，下次添加时能恢复之前的状态

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