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()。这是您现有的代码版本：

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

您在发送 ajax 请求后立即致电 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）。