点击mainDiv2时如何显示hiddenDiv并将其设为mainDiv1的子元素？

要实现点击mainDiv2时把hiddenDiv移到mainDiv1中并显示，你只需要修改JS函数，添加元素移动的逻辑即可。以下是完整的修改方案：

完整代码示例 #

HTML部分 #

<div class="mainDiv1"> This is a main div content </div>
<div class="mainDiv2" onclick="showhiddenDiv()">
  This is a sub div content
  <div class="hiddenDiv" id="hiddenDiv" style="display:none"> Hello World </div>
</div>

（注：修正了你原HTML里的拼写错误This si → This is）

JS部分 #

function showhiddenDiv(){
  // 获取目标元素
  const hiddenDiv = document.getElementById('hiddenDiv');
  const mainDiv1 = document.querySelector('.mainDiv1');
  
  // 检查hiddenDiv是否已经在mainDiv1中，避免重复移动
  if (hiddenDiv.parentElement !== mainDiv1) {
    // 将hiddenDiv移动到mainDiv1的子元素末尾
    mainDiv1.appendChild(hiddenDiv);
  }
  
  // 显示hiddenDiv
  hiddenDiv.style.display = "block";
}

关键逻辑解释 #

• 元素移动：使用appendChild()方法会自动把hiddenDiv从原来的父元素（mainDiv2）中移除，然后添加到mainDiv1的子元素列表末尾。
• 重复点击处理：添加了父元素判断，避免每次点击都重复移动元素（如果已经在目标容器里就不再执行移动操作）。
• 显示元素：保留了你原有的显示逻辑，确保元素可见。

可选优化：事件绑定分离（推荐） #

如果想让HTML和JS代码分离，更符合现代前端实践，可以去掉HTML里的onclick属性，改用addEventListener绑定事件：

修改后的HTML #

<div class="mainDiv1"> This is a main div content </div>
<div class="mainDiv2">
  This is a sub div content
  <div class="hiddenDiv" id="hiddenDiv" style="display:none"> Hello World </div>
</div>

修改后的JS #

function showhiddenDiv(){
  const hiddenDiv = document.getElementById('hiddenDiv');
  const mainDiv1 = document.querySelector('.mainDiv1');
  
  if (hiddenDiv.parentElement !== mainDiv1) {
    mainDiv1.appendChild(hiddenDiv);
  }
  
  hiddenDiv.style.display = "block";
}

// 绑定点击事件
document.querySelector('.mainDiv2').addEventListener('click', showhiddenDiv);

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