您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

document.write() 插入 table 行不可行：DOM 操作才是正解

編輯：程式設計綜合問答

為何 document.write() 失敗？

時機錯誤：`document.write()` 僅在文檔解析階段 (腳本同步執行時) 有效。頁面載入完成後調用會覆蓋整個文檔 (隱含 `document.open()`)。

結構破壞：表格結構嚴格 (` 標籤) const tbody = document.querySelector('#myTable tbody'); // 2. 創建行與單元格 const tr = document.createElement('tr'); const td1 = document.createElement('td'); td1.textContent = '資料1'; const td2 = document.createElement('td'); td2.textContent = '資料2'; tr.append(td1, td2); // 3. 插入 (多種位置) tbody.appendChild(tr); // 尾部 tbody.insertBefore(tr, refTr); // 指定行前 // 或使用 insertRow/insertCell 簡寫 const row = tbody.insertRow(-1); // -1 為尾部 row.insertCell().textContent = '資料1'; row.insertCell().textContent = '資料2';

批量高效插入：DocumentFragment


const fragment = document.createDocumentFragment();
dataArray.forEach(item => {
    const tr = document.createElement('tr');
    tr.innerHTML = `

`; // 簡單場景可用 innerHTML
    fragment.appendChild(tr);
});
tbody.appendChild(fragment); // 單次重排/重繪

jQuery 簡寫 (舊專案)


$('#myTable tbody').append('

');
// 或
$('

').append($('

`)，`write` 字串極易產生無效嵌套，瀏覽器會自動修正導致佈局崩潰。

無法定位：無法指定「在第 3 行後插入」，只能線性輸出。

標準 DOM API 方案 (現代最佳實踐)


// 1. 獲取 tbody (建議顯式寫

${item.col1} ${item.col2}

資料1 資料2

').text('資料1'), $('

').text('資料2')).appendTo('#myTable tbody');

避坑指南

...'```，操作 `tbody.rows`

錯誤做法	後果	正確做法
`table.innerHTML += '
破壞現有行的事件綁定/輸入狀態、重解析整個表格	`tbody.appendChild()` 或 `insertRow()`
省略 `
瀏覽器自動插入，但 `table.rows` 包含 thead/tfoot 行，索引易錯	顯式寫 `
用 `document.write` 寫整張表	頁面載入後會白屏覆蓋	模板引擎 / 框架 / DOM API