javascript - 显示并附加一个 div

Question

我正在编写一个 HTML 代码，其中有 3 个 div - 在 mainDiv2 中，还有另一个隐藏的 div。当我单击 mainDiv2 时，我想取消隐藏 hiddenDiv (我可以做到这一点)。我还希望这个 hiddenDiv 作为子项显示在 mainDiv1 中。

这是我的代码。

<div class="mainDiv1">
This si 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>

JS

function showhiddenDiv(){
    document.getElementById('hiddenDiv').style.display="block";
}

请让我知道我该怎么做。

这是一个工作 fiddle 。 https://jsfiddle.net/8pj3uvfn/1/

谢谢

Answer 1

您可以使用appendChild，如下所示

function showhiddenDiv() {
  var hiddenDiv = document.getElementById('hiddenDiv');
  var mainDiv1 = document.getElementsByClassName('mainDiv1')[0];
  hiddenDiv.style.display = "block"
  mainDiv1.appendChild(hiddenDiv)
}

<div class="mainDiv1" id="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>