通過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

回答

相關問題