如何使用 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>

Answer 2

这里有几件事，我对这两件事都有一个建议。我认为，如果您只是隐藏一个元素，然后让它在单击时出现，那么就没有必要在您的 HTML 中将两者分开只是为了在后面附加它们。您可以隐藏和显示它们。（显示：none 和 display:block）。功能也更加灵活。您可以在任何具有您喜欢的 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，然后动态添加 "hidden" 元素。这样你就可以将这个函数添加到你想要的元素和文本中。

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
    }

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

How to handle hidden div id dynamically with JavaScript

html

javascript

css

hidden

HTML

CSS

JS

更好的方法

HTML

JS