如何使用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 ==＆＃39; 03＆＃39; （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>

Answer 2

这里有几件事，我对两者都有建议。我认为，如果你只是隐藏一个元素，然后在点击时显示它，那么就不需要在HTML中将两个分开，只是为了追加它们。你可以隐藏并展示它们。 （显示：无和显示：阻止）。功能也更灵活。您可以在任何具有您喜欢的ID的元素上使用它。

HTML

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

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

</span>
<!-- Visible Content-->

CSS

#contentHidden{
display:none;
}

JS

<script>
function choices(e){
    var elemId = e.id, // get the id of the clicked element
        hiddenElem = e.children[0]; // get the child of the clicked element

    // if the hidden elements display style is set to none or undefined, set it to block 
    if (hiddenElem.style.display === "none" || hiddenElem.style.display === "" ){
        hiddenElem.style.display = "block";
    } 
}
</script>

更好的方法

我更喜欢这种方法。你有基础HTML，然后动态添加你的“隐藏”元素。这样，您可以将此函数添加到所需的元素和文本。

HTML

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

</span>
<!-- Visible Content-->

JS

function choices(e, txt){
       var elemId = e.id, // get the id of the clicked element
           hiddenElem = e.children[0]; // get the child of the clicked element
           makeElem = document.createElement("div"); // create a div element

       makeElem.textContent = txt; // set the text of the div element to that passed by the function arrument 
       e.appendChild(makeElem); // append the created element to the clicked element
    }