Question

我正在编写一个有3个div的HTML代码 - 而在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";
}

请让我知道我该怎么做。

这是一个工作小提琴。 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>

Answer 2

我希望这个hiddenDiv作为一个孩子在mainDiv1中显示。

您需要克隆hiddenDiv并将其放入mainDiv1。

所以将方法修改为

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

    var copyHiddenNode = hiddenNode.cloneNode( true );
    copyHiddenNode.id += "_1"; //change the id so that ids are not duplicated
    document.getElementById("mainDiv1").appendChild( copyHiddenNode  );
}

Answer 3

您可以使用appendChild

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

Demo

Answer 4

假设您已正确设置div的id属性，

function showhiddenDiv(){

    var hiddenDiv = document.getElementById('hiddenDiv');   //Get the reference

    document.getElementById('mainDiv1').appendChild(hiddenDiv)   //Chenge the DOM order (you don't have to clone)

    hiddenDiv.style.display="block";   //Unhide    


}

Answer 5

<div class="mainDiv1">
This si a main div content
</div>
<div class="mainDiv2" onclick="document.getElementById('hiddenDiv').style.display = 'block'">
This is a sub div content
<div class="hiddenDiv" id="hiddenDiv" style="display:none">
Hello World
</div>
</div>

显示并追加div

5 个答案: