DOM上的innerHTML？

Question

我有這個功能，可以將HTML內容從頁面上的一個元素切換到另一個元素。我遇到的問題是該函數的第一次迭代運行時，它保留了原始的HTML值。我認爲下面的代碼會覆蓋當前的內容。首先我錯了？

其次，我使用Ajax調用內容。這可能是一些DOM如何看不到變化的原因嗎？

這裏是我的代碼：

function subNavContent () {  
    //If ID is the reference. 
    //navContent = document.getElementByID('pageNav').innerHTML; 
    navContent = document.getElementsByClassName('pageNav')[0].innerHTML; 
    document.getElementById('subNav').innerHTML = navContent; 
    return;} 

進行切換的HTML元素我打電話：

  <nav id="subNav" class="aniSubNavOpen drop-shadow lifted"> 
      </nav> 

      <div class="pageNav"> 
      <h1 data-title="Welcome to The Mind Company"> 
      <a>Welcome to The Mind Company</a></h1> 
      </div> 

Ajax調用（和其他的東西爲了完整起見）

function subNavContent () {  
    navContent = document.getElementsByClassName('pageNav')[0].innerHTML; 

    document.getElementById('subNav').innerHTML = navContent;} 

function subNavLoader () { 
    var subNav = document.getElementById('subNav'); 
    var tmp = ''; 

    if (subNav.className === 'aniSubNavClose') { 
      tmp = 'aniSubNavOpen'; } 
     else { 
      tmp = 'aniSubNavClose';} 

     subNav.className = tmp; 
     return;} 

function sectionAssure(classID, type) { 
    subNavLoader (); 

    setTimeout(function () { 

     var tmp = ''; 
     var sel = document.getElementsByTagName('section'); 

     for (var i=0; i<sel.length; i++){ 

      if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' } 
      sel[i].style.display = tmp; } 

     subNavLoader (); }, (1500)); } 

function loadContent (classID, url, type) { 
    var xmlhttp; 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 

     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById(classID).innerHTML=xmlhttp.responseText;}}; 

     xmlhttp.open("GET", url, true);   
     xmlhttp.send();    
     subNavContent ();} 
    return; } 

Answer 1

如果您的物品有class="pageNav"和id="subNav"存在，並且pageNav在第一次運行subNavContent()函數時會在其中包含所需的內容，然後將class="pageNav"中的第一個對象的內容複製到id="subNav"的對象中。注意 - 這不是移動內容，而是複製HTML並將其分配給對象subNav。它將取代以前的內容subNav。

如果第一次調用它時不工作，那可能是因爲這兩個對象之一還不存在，或者在運行該函數時pageNav的內容尚未存在。

另外，不能有兩個具有相同ID的元素。您的HTML顯示兩個元素id="subNav"。應該只有一個具有給定ID的元素。這就是爲什麼document.getElementByid()只返回一個元素。

此外，您的問題中的HTML不顯示任何對象與class="pageNav"。

在ajax調用完成後，如何進行ajax調用和調用此函數也有可能存在問題。您將不得不向我們展示您的ajax代碼，以便我們對此發表評論。例如，如果您沒有等到ajax調用的成功處理程序被調用，那麼在您第一次運行該函數時，新內容就不會出現在頁面中。

---

編輯：看在OP的實際頁面Ajax調用實際的代碼之後。

我可以確認您在ajax調用中調用subNavContent()的方式不正確。此代碼不起作用，因爲您在新內容加載到頁面之前致電subNavContent()。這是代碼的現有版本：發送您的Ajax請求之後

function loadContent (classID, url, type) { 
    var xmlhttp; 
    var dir = getDir (type); 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 

     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById(classID).innerHTML=xmlhttp.responseText;}}; 

     xmlhttp.open("GET", dir + url, true);    
     xmlhttp.send(); 

     subNavContent ();} 
    return; } 

要調用subNavContent()。您只能在收到響應並將數據放入您的頁面後才能運行此調用。你可以把它改成這樣：

function loadContent (classID, url, type) { 
    var xmlhttp; 
    var dir = getDir (type); 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 

     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById(classID).innerHTML=xmlhttp.responseText; 
       subNavContent (); 
      } 
     } 

     xmlhttp.open("GET", dir + url, true);    
     xmlhttp.send(); 

    } 
    return; 
} 

此外，你有一個非常困難的支撐風格閱讀，理解，防止決策失誤和編輯。

Answer 2

您的功能沒有切換內容，它正在複製它。 innerHTML是一個字符串，而不是pageNav中包含的實際元素。

要移動內容，您必須從pageNav中選擇所有子元素並將它們附加到subNav（使用appendChild）。