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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:25:31  来源:igfitidea点击:

change div id by javascript

javascripthtml

提问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

Working FIDDLE Demo

Working FIDDLE Demo

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

小提琴演示