通过javascript更改div id

我创建了一个简单的页面，每次按下提交时都可以更改div ID。我的问题是，这个从div_top1变化 - > div_top2，但我第二次按下按钮，停止改变:(通过javascript更改div id

<!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>

来源

2013-05-16 Diogo Leones

请问为什么你想改变ID？为什么不使用classname？ ID只会改变一次，因为第二次你不能找到第一个ID – mplungjan

你不会更安全地改变一个div的类吗？ – slinky2000

在您的代码中，您将div_top1更改为div_top2的那一刻就会停留在那里。除非你把一个if切换，否则它会不断变化。 – Edper

Working FIDDLE Demo

试试这个：

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


}

来源

2013-05-16 10:03:41

有时候，唯一需要的是有人推：D 谢谢，这工作正常，现在我明白了为什么我的解决方案didn 't ....我被setAttribute两次... –

问题不在于改变的id - 它是你每次都在改变它，你需要一个if条件，你也应该使用.id来改变id而不是setAttribu te（） - 我在过去（多年前）使用setAttribute进行id更改时遇到了一些浏览器问题。

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

来源

2013-05-16 10:04:51

顺便说一句...有可能使包括像.include =“index.php”？我想在div中包含不同的页面... –

您可以使用AJAX从服务器加载内容，然后使用.innerHTML将其放置在div中。 –

如果举例来说，如果你想切换或更改每次提交，如时间，您可以使用：

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

}

见Fiddle Demo

来源

2013-05-16 10:07:47 Edper

通过javascript更改div id

回答

相关问题