為什么 innerHTML 行為怪異

Question

因此，我正在制作一個 javascript 文件，該文件使用一個循環來制作時間表 1 到 12，但我使用 css 通過使時間表 class 的任何元素浮動到右側來營造整潔的感覺。 但是，將每個時間表分開並具有 class 時間表的 div 沒有任何子級。 我試圖使持有一個時間表的 p 元素成為 div 的子元素。 這是我的代碼：

 var math = document.getElementById("maths"); for (var num = 1; num <= 12; num++) { math.innerHTML += "<div class=\"timetable\">"; for (var currentMath = 1; currentMath <= 12; currentMath++) { math.innerHTML += "<p>" + num + " x " + currentMath + " = " + (num * currentMath) + " </p>"; } math.innerHTML += "</div>"; }

預計 HTML：

<div class="timetable"><p>1 x 1 = 1</p>....</div>

HTML：

<div class="timetable"></div><p>1x1 = 1</p>...

誰能幫我？

Answer 1

問：為什么innerHTML行為怪異？

答：因為你在用它做一些奇怪的事情。

您的問題是您正在嘗試將未封閉的元素分配給innerHTML 。 您在此處分配的字符串必須始終是完整的，因為您分配的任何字符串都將被解析為實際有效的 HTML。這意味着您執行操作的方式瀏覽器將為您關閉未關閉的 div：

math.innerHTML += "<div class=\"timetable\">";

將導致瀏覽器為您關閉div ：

<div class="timetable"></div>

在那之后，你 append <p>....whatever...</p>在一個循環中重復innerHTML ，導致這個innerHTML ：

<div class="timetable"></div>
<p>....whatever...</p>
<p>....whatever...</p>
<p>....whatever...</p>

如您所見， p元素不是div.timetable的子元素。

要解決您的問題，只需在分配之前構建您的字符串（並使用模板文字來做到這一點）：

 const math = document.getElementById("maths"); let html = ''; for (let num = 1; num <= 12; num++) { html += `<div class="timetable">`; for (let currentMath = 1; currentMath <= 12; currentMath++) { html += `<p>${num} x ${currentMath} = ${num * currentMath}</p>`; } html += "</div>"; } math.innerHTML = html;

 <div id="maths"></div>

另外，在 2022 年不要再使用var ，默認使用const ，如果你知道你將不得不重復分配給變量，請使用let 。 僅當您明確需要它具有的特定作用域行為時才應使用var 。

Answer 2

請使用document.createElement()和 append 子元素（這被認為是最佳實踐）創建 HTML 元素，而不是將其分配為字符串。

在appendChild()的幫助下，您可以將 append 子元素添加到父元素。

工作示例：

 const math = document.getElementById("maths"); for (let num = 1; num <= 12; num++) { const timeTable = document.createElement('div'); timeTable.classList.add('timetable'); for (let currentMath = 1; currentMath <= 12; currentMath++) { const child = document.createElement('p'); child.textContent = num + " x " + currentMath + " = " + (num * currentMath) timeTable.appendChild(child); } math.appendChild(timeTable); }

 <div id="maths"></div>

Answer 3

下面的代碼應該可以工作。 你沒有添加任何 HTML，所以我不確定它是否適用於你，但嘗試一下......

 var math = document.getElementById("maths").innerHTML; var code = math; for (var num = 1; num <= 12; num++) { code += "<div class=\"timetable\">"; for (var currentMath = 1; currentMath <= 12; currentMath++) { code += "<p>" + num + " x " + currentMath + " = " + (num * currentMath) + " </p>"; } code += "</div>"; document.getElementById("maths").innerHTML += code; code = ""; }

 <div id="maths"></div>