通过javascript更改div id

Question

每次按下提交时，我都创建了一个简单的页面来更改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>

Answer 1

工作FIDDLE演示

尝试这个：

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");
    }


}

Answer 2

问题不在于改变身份 - 这是你每次都以两种方式改变它。 你需要一个if条件。 您还应该使用.id来更改id而不是setAttribute（） - 我在过去（多年前）使用setAttribute进行id更改时遇到了一些问题。

演示： 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";
    }
}

Answer 3

您可以使用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");
 }

}

请参阅小提琴演示

通过javascript更改div id

问题描述

3 个解决方案

解决方案1
15 已采纳

解决方案2
3 2013-05-16 10:04:51

解决方案3
1 2013-05-16 10:07:47

通过javascript更改div id

问题描述

3 个解决方案

解决方案1 15 已采纳

解决方案2 3 2013-05-16 10:04:51

解决方案3 1 2013-05-16 10:07:47

解决方案1
15 已采纳

解决方案2
3 2013-05-16 10:04:51

解决方案3
1 2013-05-16 10:07:47