如何避免修改父元素时表单输入框内容被清空？

Hey there! Let's dig into why your input values get cleared when modifying the parent element, and look at some cleaner, more reliable solutions than the ones you've tried so far.

Why the Inputs Get Cleared #

When you use innerHTML += to update the parent element, the browser doesn't just tack on new content—it re-parses the entire parent's HTML, destroys the original form elements, and recreates them from scratch. The catch is: the value you type into an input lives in the DOM element's value property, not the HTML's value attribute. So when the element is recreated, it uses the original (empty) attribute value instead of your typed content.

Limitations of Your Current Solutions #

Your two approaches work, but they're manual and error-prone:

• The first requires you to remember to save values before every parent update, which gets tedious fast with multiple inputs.
• The second fixes the multiple-input issue but still relies on calling setInputValues() every time you modify the parent—easy to forget, and using setInterval would be overkill and inefficient.

Better Solution 1: Use DOM Methods Instead of innerHTML #

The cleanest fix is to avoid innerHTML entirely. Instead, create new elements with native DOM APIs and append them to the parent. This way, the original form elements stay intact, and your input values never get lost.

Here's how to rewrite your example:

function modifyParent() {
  const parent = document.getElementById("parent");
  // Create a new line break
  const lineBreak = document.createElement("br");
  // Create the text node for the new line
  const newText = document.createTextNode("a line get added");
  // Append both to the parent
  parent.appendChild(lineBreak);
  parent.appendChild(newText);
}

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

This approach has huge benefits:

• No need to save/restore input values at all—your original inputs stay in the DOM.
• Works with any number of inputs, no extra code required.
• Better performance, since we're only adding new nodes instead of re-rendering the entire parent.

Better Solution 2: Auto-Sync Values If You Must Use innerHTML #

If you absolutely have to use innerHTML (for example, if you're inserting complex HTML strings), you can automatically sync input values to their value attributes as the user types. This way, when the parent is re-rendered, the new elements will pick up the latest values.

Add this to your code:

// Sync input values to their attributes whenever the user types
document.addEventListener('DOMContentLoaded', () => {
  const inputs = document.getElementsByTagName("input");
  for (const input of inputs) {
    input.addEventListener('input', function() {
      this.setAttribute('value', this.value);
    });
  }
});

// Your existing modify function stays the same—no need to call setInputValues()
function modifyParent() {
  document.getElementById("parent").innerHTML += "<br>a line get added";
}

Now every time a user types into an input, its value attribute gets updated automatically. When you modify the parent with innerHTML, the recreated inputs will use the updated attribute value, so your content stays put.

内容的提问来源于stack exchange，提问作者Julien Maret