如何用javascript更改div内容

这看起来很简单，但我不知道我在做什么。我有2个单选按钮，取决于哪一个被选中，div的内容会改变。现在我有一个父div内的2个div，但它会隐藏一个div并显示另一个div。如果他们即使看不见，也不会占用太多空间。如何用javascript更改div内容

HTML：

<div> 
    <form role="form"> 
     <div> 
      <div class="radio" id="radioSelection" onchange="chooseDiv()"> 
       <label> 
        <input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1 
       </label> 
       <label> 
        <input type="radio" name="optradio" id="selectionDiv2" />Choose Div2 
       </label> 
      </div> 
     </div> 
    </form> 
</div> 

<div id="parentDiv"> 
    <div id="div1">You're Awesome!</div> 
    <div id="div2">Everybody loves you!</div> 
</div>

的JavaScript：

function chooseDiv() { 
    if (document.getElementById("selectionDiv1").checked) { 
     document.getElementById("div2").style.visibility = "hidden"; 
     document.getElementById("div1").style.visibility = "visible"; 
    } else { 
     document.getElementById("div2").style.visibility = "visible"; 
     document.getElementById("div1").style.visibility = "hidden"; 
    } 
}

所以我想有这么一个只有DIV是一次明显的，这取决于单选按钮被选中，和唐”当他们不在分区时，不要让他们占用空间。谢谢！

来源

2015-06-29 Markus

如果你想这些div停止服用空间，你必须使用显示：无，而不是知名度：隐藏，你的函数改为

function chooseDiv() { 
    if (document.getElementById("selectionDiv1").checked) { 
     document.getElementById("div2").style.display = "none"; 
     document.getElementById("div1").style.display = "block"; 
    } else { 
     document.getElementById("div2").style.display = "block"; 
     document.getElementById("div1").style.display = "none"; 
    } 
}

工作plnkr：http://plnkr.co/edit/H4C9C7dAD324qJUgESMF?p=preview

来源

2015-06-29 18:18:16 yvesmancera

非常感谢:) – Markus

不客气，很高兴它帮助你。 – yvesmancera

visibility属性将始终每当它被隐藏时使用该空间。

更好的方法是使用display属性。

事情是这样的：

document.getElementById("div2").style.display= "none"; //similar to hidden 
document.getElementById("div1").style.display= "block"; // visible

来源

2015-06-29 18:20:22 Varun

谢谢你的努力：D – Markus

您正在使用visibility: hidden隐藏的div，隐藏他们，但让他们把空间浏览器，尝试不使用hidden使用none代替display财产，以及而不是使用visible使用block。

来源

2015-06-29 18:20:42 maltray

非常感谢你:) – Markus

看看这个链接http://www.w3schools.com/css/css_display_visibility.asp。这清楚地解释了能见度和显示之间的差异。

来源

2015-06-29 18:24:24

感谢您的帮助:) – Markus

您必须首先了解display和visibility属性之间的差异。

显示 - 无 - 当你做display none这意味着从DOM整个元素会隐藏在DOM.So它的物理存在，就不会有对DOM该元素的空间分配。

可见性 - 隐藏 - 在这种情况下，您只隐藏该元素，但物理上该元素存在于该空间中。因此，空间将分配该元素。

的更多详情，请按照this

来源

2015-06-29 18:28:16 Anshul

太棒了！我没有定义，谢谢！ – Markus

只需一个DIV和变化内容

DEMO

HTML

<body onload='chooseDiv();'> 
<div> 
    <form role="form"> 
     <div> 
      <div class="radio" id="radioSelection" onchange="chooseDiv()"> 
       <label> 
        <input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1 
       </label> 
       <label> 
        <input type="radio" name="optradio" id="selectionDiv2" />Choose Div2 
       </label> 
      </div> 
     </div> 
    </form> 
</div> 

<div id="parentDiv"> 
    <div id="div1"></div> 
</div> 

<div style='display:none'> 
    <div id='c1'><span>TEST 1</span><img src='http://cdn.sstatic.net/stackoverflow/img/[email protected]?v=hiFacebook'/></div> 
    <div id='c2'><span>TEST 2</span><img src='http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg' /></div> 
</div> 

</body>

function chooseDiv() { 
    var div = document.getElementById("div1"); 
    var msg = document.getElementById("c1").innerHTML; 

    if (!document.getElementById("selectionDiv1").checked) { 
     msg = document.getElementById("c2").innerHTML; 
    } 

    div.innerHTML = msg; 
}

来源

2015-06-29 18:29:34 Mate

您的回答非常好，但在我的项目中，我实际上在每个div中都有图表，我只是使用文字使示例更易于理解 – Markus

无论哪种方式谢谢:) – Markus

好的，您可以在innerHTML内设置html内容。例如：innerHTML ='

' – Mate

如何用javascript更改div内容

回答

相关问题