首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

HTML 頁面中 console.info 無輸出的原因:document.write 覆蓋導致控制台清空

     編輯:程式設計疑難解答

問題代碼

function abc() {
    console.info(88); // 無輸出
    var demo = document.getElementById("demo1");
    while (demo) {
        document.write('
  • ' + demo.nodeName + '
  • '); // 關鍵問題 console.info(1); // 無輸出 demo = demo.previousElementSibling; } }

    根因

    document.write 在頁面加載完成後調用,會隱式調用 document.open(),清空當前文檔並重新寫入。導致:

    1. 原有 DOM 節點(包括腳本上下文)被銷毀。
    2. 控制台上下文重置,之前的 console.info 輸出被清除。
    3. 後續代碼在新文檔中執行,但通常因腳本已移除而停止。

    修正方案

    方案一:使用 innerHTML 追加

    var container = document.getElementById('logContainer') || document.body;
    container.innerHTML += '
  • ' + demo.nodeName + '
  • ';

    方案二:DOM API 創建元素

    var li = document.createElement('li');
    li.textContent = demo.nodeName;
    document.body.appendChild(li);
    

    方案三:調試用 alert/console.log 替換

    console.log('nodeName:', demo.nodeName); // 正常輸出到控制台
    

    最佳實踐

    • 頁面加載後禁用 document.write,僅在頁面流式加載階段(腳本阻塞期)安全使用。
    • 現代開發統一使用 DOM API 或前端框架(Vue/React)進行視圖更新。
    1. 上一篇文章:
    2. 下一篇文章:
    Copyright © 程式碼之家 All Rights Reserved