innerHTML on DOM?

innerHTML on DOM?

本文关键字：DOM on innerHTML      更新时间：2023-09-26

我有一个函数，可以将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;  }

如果具有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调用的成功处理程序被调用，那么在您第一次运行该函数时，新内容就不会出现在页面中。

EDIT:查看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;  
}

此外，你有一种极其难以阅读、理解、防止出错和编辑的支撑风格。

您的函数不是在切换内容，而是在复制内容。innerHTML是一个字符串，而不是pageNav中包含的实际元素。

要移动内容，您必须从pageNav中选择所有子元素，并将它们附加到subNav（使用appendChild）。

相关文章：