如何实现点击H3元素切换DOM中H4、P元素的显示与隐藏？

你当前的代码每次点击都会重复添加H4和P元素到Div中，这会导致DOM里堆积大量重复元素，自然无法正常实现切换隐藏的效果。下面提供两种可行的解决方式：

方式一：用CSS类控制显示隐藏（推荐） #

提前创建好H4和P元素，默认隐藏并添加到Div中，点击H3时通过切换CSS类来控制显示状态：

// 仅执行一次：创建元素并默认隐藏
const h4 = document.createElement('h4');
h4.textContent = '你的H4内容';
h4.classList.add('hidden');

const p = document.createElement('p');
p.textContent = '你的P内容';
p.classList.add('hidden');

// 把元素提前加入Div
Div.append(h4);
Div.append(p);

// 绑定点击事件
H3.addEventListener('click', clickFunction);

function clickFunction() {
  // 切换隐藏类
  h4.classList.toggle('hidden');
  p.classList.toggle('hidden');
}

对应的CSS样式：

.hidden {
  display: none;
}

方式二：动态添加/移除元素 #

如果不想提前将元素放入DOM，可以通过判断元素是否存在来决定添加或移除：

// 仅执行一次：创建元素
const h4 = document.createElement('h4');
h4.textContent = '你的H4内容';

const p = document.createElement('p');
p.textContent = '你的P内容';

// 绑定点击事件
H3.addEventListener('click', clickFunction);

function clickFunction() {
  // 检查H4是否已在Div内
  const isElementExist = Div.contains(h4);
  
  if (isElementExist) {
    // 存在则移除
    h4.remove();
    p.remove();
  } else {
    // 不存在则添加
    Div.append(h4);
    Div.append(p);
  }
}

关键注意事项： #

• 不要在clickFunction内重复创建h4和p元素，否则每次点击都会生成新元素，旧元素无法被控制。
• 确保H3、Div等变量已正确获取到对应的DOM元素，避免出现未定义报错。

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