我能对此提供一些意见吗？

当表单或表单的父元素被修改时，在表单输入中键入的文本将被清除。 正如这篇文章所示:

null

function modifyParent() {
  document.getElementById("parent").innerHTML += "<br>a line get added";
}

<div id="parent">
<form>
  <input type="text" id="child">
</form>
<button type="button" onclick="modifyParent()">click</button>
</div>

null

大家好，

如果我知道父项被修改的位置，我找到了一种防止它的第一种esay方法。 正如这个剪辑器所显示的

null

function modifyParent() {
  var child = document.getElementById("child");
  child.setAttribute("value", child.value)
  document.getElementById("parent").innerHTML += "<br>a line get added";
}

<div id="parent">
<form>
  <input type="text" id="child" value="">
</form>
<button type="button" onclick="modifyParent()">click</button>
</div>

null

这个解决方案看起来很棒，但前提是我知道修改父项时的位置。 另外，如果我有多个输入，我需要在document.getElementsByTagName（“input”）上循环。

由于我不知道我有多少按钮和多少输入，这是我目前为止最好的解决方案:

null

function modifyParent() {
  setInputValues();
  document.getElementById("parent").innerHTML += "<br>a line get added";
}

function setInputValues() {
  for (var c of document.getElementsByTagName("input"))
    c.setAttribute("value", c.value);
}

<div id="parent">
<form>
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
</form>
<button type="button" onclick="modifyParent()">click</button>
</div>

null

对于多个输入，它工作得很好，但是每次修改父项之前，我必须调用setInputValues()函数。 我开始考虑在这个函数上添加setInterval，但我在这里停下来，因为我开始走得有点远，很可能他们是一个更好的方法。

任何帮助都将被接受