嘗試更改元素的DOM的屬性，但是使用document.body.innerHTML + =后，更改被忽略。如果順序切換，一切正常

Question

我很難說出該問題的標題，但找不到更簡潔的答案。

我想將事件oninput附加到元素（此處是input字段）。 但是由於某種原因，它沒有用。 我將問題縮小到示意圖MWE（最后是完整的MWE）。

addEvent();
document.body.innerHTML += "a";

addEvent()只是一個函數，它更改了input字段的oninput屬性。 我的問題是addEvent()被忽略了。

確保addEvent(); 正常運行時，我還修改了input字段的value及其在函數正文中的backgroundColor 。 但是，當我運行代碼時， oninput和value修改，但是backgroundColor已根據函數進行了修改。

如果我寫的話，對我來說更神秘

document.body.innerHTML += "a";
addEvent();

事情按預期進行。

我的問題分為兩個部分：

如何修復addEvent()的代碼，因此無論我在前后編寫document.body.innerHTML += "a" ，結果都一樣嗎？
為什么backgroundColor運行正常，而其余的似乎都被忽略了？

以下是我完整的MWE：

 function addEvent() { var fieldScore = document.getElementById("foo"); fieldScore.style.backgroundColor = "rgb(0,255,0)"; fieldScore.value = "a"; fieldScore.oninput = function () { console.log("bar"); } } // document.body.innerHTML = buildForm(); addEvent(); document.body.innerHTML += "a";

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form><input type="text" value="" name="foo" id="foo"></form> <script type="text/javascript" src="mwe.js"></script> </body> </html>

預計：相同，但有a在input領域也是如此。

Answer 1

innerHTML +=幾乎總是反模式。 它使瀏覽器執行此操作：

遍歷您要在其上進行操作的元素的所有子代及其子代子代，等等，並構建一個HTML字符串。
將文本附加到該字符串。
銷毀所有這些子元素（及其子元素等），解析HTML字符串，然后將其替換為解析字符串后創建的新元素。

在此過程中，事件處理程序和有關被破壞元素的任何其他非HTML信息都會丟失。

如果需要附加到元素，請使用appendChild或insertAdjacentHTML 。 例如：

document.body.appendChild(document.createTextNode("a"));

要么

document.body.insertAdjacentHTML("beforeend", "a");

嘗試更改元素的DOM的屬性，但是使用document.body.innerHTML + =后，更改被忽略。如果順序切換，一切正常

問題描述

1 個解決方案

解決方案1
2 已采納 2018-10-01 15:04:09

嘗試更改元素的DOM的屬性，但是使用document.body.innerHTML + =后，更改被忽略。 如果順序切換，一切正常

問題描述

1 個解決方案

解決方案1 2 已采納 2018-10-01 15:04:09

嘗試更改元素的DOM的屬性，但是使用document.body.innerHTML + =后，更改被忽略。如果順序切換，一切正常

解決方案1
2 已采納 2018-10-01 15:04:09