javascript - 如何使用 JavaScript 动态处理隐藏的 div id

Question

我正在尝试做一个动态页面，我有一个隐藏的 div，我想让它可见附加到另一个 div，但我只想用一个函数来完成它，这是我的代码。

<script>
var hiddenDivID;
function appendHiddenDiv(hiddenDivID){
    var hiddenDiv = document.getElementById(hiddenDivID);
    var document = document.getElementById('content');
    document.appendChild(hiddenDiv);
}

function choices(e){
   if(e.id == 03){
    appendHiddenDiv('myHiddenDiv');
   }
}

<!-- Visible Content-->
<div id="content">
 My content
</div>
<span id="03" onclick="choices(this);">Click Here</span>
<!-- Visible Content-->

<!-- Invisible Content-->
  <div id="contentHidden">
    <div id ="myHiddenDiv">
       Hidden content
    </div>
  </div>
<!-- Invisible Content-->

我做了一个函数，如果我点击点击这里 hiddenDivID = myHiddenDiv并调用 appendHiddenDiv()所以需要 myHiddenDiv并附加到 <div id="content"></div> .但这不起作用，我在这方面做错了什么？有没有办法让函数将其识别为 id？如果有，有人可以告诉我正确的方向吗？提前致谢。

Answer 1

这将在您单击时附加您的 div。你有 e.id == 03，你需要 e.id == '03'(id 是一个字符串)。

<script>
var hiddenDivID;
function appendHiddenDiv(hiddenDivID){
    var hiddenDiv = window.document.getElementById(hiddenDivID);
    var document = window.document.getElementById('content');
    document.appendChild(hiddenDiv);
}

function choices(e){

   if(e.id == '03'){
    appendHiddenDiv('myHiddenDiv');
   }
}
</script>



<div id="content">
 My content
</div>
<span id="03" onclick="choices(this);">Click Here</span>
<!-- Visible Content-->

<!-- Invisible Content-->
  <div id="contentHidden">
    <div id ="myHiddenDiv">
       Hidden content
    </div>
  </div>