尝试更改元素的DOM属性，但在使用document.body.innerHTML + =后忽略了更改。如果订单切换，一切正常 [英] Trying to change an element's DOM's properties, but changes ignored after I use document.body.innerHTML +=. If order switched, things work fine
问题描述
我很难说出这个问题的标题，但找不到更简洁的内容。
I had a hard time phrasing that question's title, but could not find anything more concise.
我想附加一些事件 oninput 到一个元素（这里是一个输入字段）。但由于某种原因它没有用。我将问题缩小到原理图MWE（最后完成MWE）。
I want to attach some event oninput to an element (here an input field). But for some reason it didn't work. I narrowed the issue to the schematic MWE (complete MWE at the end).
addEvent();
document.body.innerHTML += "a";
addEvent（）只是一个函数更改了输入字段的 oninput 属性。我的问题是忽略了 addEvent（）。
addEvent() was simply a function which changed the oninput property of an input field. My issue was that addEvent() was ignored.
确保 addEvent（） ; 正常运行，我还修改了输入字段的值及其<函数体中code> backgroundColor 。然而，当我运行代码时， oninput 和值修改无处可寻，但是 backgroundColor 已根据函数进行了修改。
To make sure addEvent(); ran normally, I also modified the value of the input field, and its backgroundColor in the body of the function. Yet, when I ran the code, the oninput and value modifications were nowhere to be found, but the backgroundColor had been modified as per the function.
如果我写的话，对我来说更加神秘
More mystifying to me, if I write
document.body.innerHTML += "a";
addEvent();
事情按预期工作。
我的问题分为两部分：
- 如何修复
addEvent（），所以无论我在之前或之后写document.body.innerHTML + =a，结果都一样吗？ - 为什么
backgroundColor运行正常，而其余部分似乎被忽略了？
- how to I fix the code of
addEvent(), so that no matter if I writedocument.body.innerHTML += "a"before or after, the result would be the same? - why does the
backgroundColorrun fine, while the rest seems to be ignored?
以下是我的完整MWE：
Here is my complete MWE below:
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
Expected: same, but with a in the input field as well.
推荐答案
innerHTML + = 几乎总是反模式。它使浏览器执行此操作：
innerHTML += is almost always an anti-pattern. It makes the browser do this:
- 遍历所有孩子和孩子的孩子等等。并构建一个HTML字符串。
- 将文本附加到该字符串。
- 销毁所有这些子元素（及其子元素等），解析HTML字符串，并将其替换为解析字符串后创建的新元素。
在该过程中，事件处理程序和任何有关被销毁元素的其他非HTML信息将丢失。
In that process, event handlers and any other non-HTML information on the elements that are destroyed is lost.
如果需要附加到元素，请使用 appendChild 或 insertAdjacentHTML 。例如：
If you need to append to an element, use appendChild or insertAdjacentHTML. For instance:
document.body.appendChild(document.createTextNode("a"));
或
document.body.insertAdjacentHTML("beforeend", "a");
这篇关于尝试更改元素的DOM属性，但在使用document.body.innerHTML + =后忽略了更改。如果订单切换，一切正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
