Html 通过javascript更改div id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16584121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change div id by javascript
提问by Diogo Leones
I've created a simple page to change the div id every time I pressed submit. My problem is that this changes from div_top1 -> div_top2, but the second time I press the button, it stops changing :(
我创建了一个简单的页面来在每次按下提交时更改 div id。我的问题是这从 div_top1 -> div_top2 改变，但是我第二次按下按钮时，它停止改变:(
<!DOCTYPE html>
<html>
<head>
<script>
function changediv()
{
document.getElementById("div_top1").innerHTML=Date();
document.getElementById("div_top1").setAttribute("id", "div_top2");
document.getElementById("div_top2").innerHTML="teste";
document.getElementById("div_top2").setAttribute("id", "div_top1");
}
</script>
<style>
.top {
background-color: navy;
color: white;
padding: 10px 10px 10px 10px;
margin: 5px 5px 5px 5px;
}
.down {
background-color: aqua;
padding: 10px 10px 10px 10px;
margin: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div id="div_top1" class="top">This is a paragraph.</div>
<div class="down"><button type="button" onclick="changediv()">Display Date</button></div>
</body>
</html>
回答by
Try this:
尝试这个：
function changediv()
{
if (document.getElementById("div_top1")) {
document.getElementById("div_top1").innerHTML=Date();
document.getElementById("div_top1").setAttribute("id", "div_top2");
}
else {
document.getElementById("div_top2").innerHTML="teste";
document.getElementById("div_top2").setAttribute("id", "div_top1");
}
}
回答by Steven Moseley
The problem isn't the changing id - it's that you're changing it both ways every time. You need an if condition. You should also use .id to change the id instead of setAttribute() - I've had issues with some browsers in the past (many years ago) using setAttribute for id changes.
问题不在于更改 id - 而是您每次都在双向更改它。你需要一个 if 条件。您还应该使用 .id 来更改 id 而不是 setAttribute() - 我在过去（很多年前）使用 setAttribute 更改 id 时遇到了一些浏览器的问题。
DEMO: http://jsfiddle.net/x2nPY/
演示：http: //jsfiddle.net/x2nPY/
function changediv() {
if (document.getElementById("div_top1")) {
document.getElementById("div_top1").innerHTML = Date();
document.getElementById("div_top1").id = "div_top2";
} else {
document.getElementById("div_top2").innerHTML = "teste";
document.getElementById("div_top2").id = "div_top1";
}
}
回答by Edper
You could use if for example if you want to toggle it or change every time you submit like:
例如，如果您想在每次提交时切换或更改它，您可以使用 if：
function changediv() {
if (document.getElementById("div_top1"))
{
document.getElementById("div_top1").innerHTML=Date();
document.getElementById("div_top1").setAttribute("id", "div_top2");
}
else
{
document.getElementById("div_top2").innerHTML="teste";
document.getElementById("div_top2").setAttribute("id", "div_top1");
}
}
See the Fiddle Demo
