爲什麼innerHTML擦除這些輸入字段上的值？

所以我創建可以添加自定義字段的表單。我最初使用.innerHTML來添加這些額外的表單。當我添加新表單時，先前表單中的任何值都被擦除。爲什麼innerHTML擦除這些輸入字段上的值？

所以HTML看起來像這樣：

<button id="add"></button> 
<div id = "outer_div"></div>

初始JavaScript是這樣的：

$(document).on("click", "#add", function() 
    { 

    getElementById("outer_div").innerHTML +='<input></input>'; 

    });

說你加兩個字段。你在第一個領域寫了些東西。您按下#add按鈕。現在在第一個字段中寫的內容已被清除。

我決定用jQuery和它不再有這個問題：

$(document).on("click", "#add", function() 
    { 

    $("#outer_div").append('<input></input>'); 

    });

爲什麼？

重要的是明白**值屬性**不存儲在**值屬性**當用戶改變輸入。該屬性從不改變 – charlietfl

的問題是因爲「+ =」操作符：

getElementById("outer_div").innerHTML +='<input></input>';

正在發生的事情是要重設的innerHTML的每一次，它有效地消除了現有油田和完整的價值重新添加他們。

jQuery沒有發生這種情況的原因在於，jQuery使用Javascript .appendChild函數直接在DOM中插入新元素。

您例如純JavaScript版本是這樣的：

var inpElem = document.createElement("input"); 

document.getElementById("outer_div").appendChild(inpElem);

2016-06-28 23:23:40 ryancdotnet

這是因爲寫入字段的值不被認爲是現有HTML的一部分。所以，當你將新的HTML添加到表單時，值就會丟失，因爲就innerHTML而言，它們不存在。一個可能的解決辦法是暫時將所有表單的值存儲在變量中，然後一旦將新的HTML附加到舊的，將其重新分配給適當的字段。

2016-06-28 23:11:04

回答