Question

我有一个div，其中包含一些按钮（用于登录）。在用户使用Facebook登录并重定向回页面之后，我想在此保留该div，但将其所有内容替换为新内容。（删除按钮并打个招呼）。

由于我是新手，所以我想知道什么是好的做法：

在第一个{}中创建另一个div，将其设置为隐藏，然后在需要时隐藏第一个并显示另一个
创建另一个div 外部，并执行与1相同的操作。
更好的方法？

执行1或2-我不希望隐藏的div在隐藏时占用空间。

如何使用JavaScript隐藏/显示div？

Answer 1

没有必要创建另一个div

如果只有新内容中的文本，则可以使用innerHTML或innerText更改内容。

赞：

document.getElementById('div').innerText = "Logged";
document.getElementById('div2').innerHTML = "Bar<br/><b>Foo</b><button>Btn</button>";

<div id="div">Login</div>
<div id="div2">Login</div>

Answer 2

x = document.getElementById("my_div_id");   //Get div by ID
x.style.display = "none";                   //Hide
x.style.display = "block";                  //Show

<div id="my_div_id">TEST DIV</div>

您的div必须采用以下格式：<div id="my_div_id">VALUE</div>

更多信息在这里：W3School Toggle

Answer 3

隐藏的divs不会占用页面空间！

解决您的问题：

这行不通，只是从逻辑上考虑：将父div（描述中的第一个div）隐藏起来，然后其子元素也将被隐藏！
这就是做到这一点的方法！只需将您的2 divs保持在同一级别，然后交替隐藏/显示它们即可。
您也可以只使用1 div，并为每次使用替换其内容（更好的选择取决于您的情况）

要在javascript中制作类似的代码，您可以遵循以下原则：

function switchdivs() {
  if (document.getElementById('one').style.display == 'block') {
    document.getElementById('one').style.display = 'none';
    document.getElementById('two').style.display = 'block';
  } else {
    document.getElementById('one').style.display = 'block';
    document.getElementById('two').style.display = 'none';
  }
}

function replacediv() {
  if (document.getElementById('replacer').innerHTML == "Original content")
    document.getElementById('replacer').innerHTML = 'Replaced content';
  else
    document.getElementById('replacer').innerHTML = "Original content";
}

#two {
  display: none;
}

<div id='one'>
  one
</div>
<div id='two'>
  two
</div>
<button onclick="switchdivs()">Toggle the divs!</button>
<button onclick="replacediv()">Replace the div bellow!</button>
<div id='replacer'>
  Original content
</div>

Answer 4

我不确定您将如何知道已重定向的内容，但请假设此变量为redirected，如果redirected为true，则带有按钮的div将被隐藏，而其他div-可见。如果您提供了更好的用例，请更新我的答案。

<div id="wrapper">
  <div id="buttons-container">
    <button>one</button>
    <button>two</button>
  </div>
  <div style="display: none" id="willShow">Hi</div>
</div>

const wrapper = document.getElementById('wrapper');
const willShow = document.getElementById('willShow');
const buttonsContainer = document.getElementById('buttons-container');

const redirected = true;
if(redirected) {
  buttonsContainer.style.display = 'none';
  willShow.style.display = 'block';
}

https://codepen.io/anon/pen/RdEgQj

完全以编程方式更改div内容

4 个答案: