Javascript InnerHTML 擦除表单元素中的数据答案

【问题标题】：Javascript InnerHTML Erases Data In Form ElementsJavascript InnerHTML 擦除表单元素中的数据
【发布时间】：2011-01-25 14:15:55
【问题描述】：

我有一个带有按钮的表单，可让您向表单添加字段。

<form id="contact" name="contactForm" action="newPoll.php" method="post">
                        <fieldset>
                            <legend>Create A Poll</legend><br style="clear:both;">           

                                <ol>
                                    <li><lable for=pollTitle>Poll Title:</lable><input name="pollTitle" id="pollTitle" type="text" size="66"  /> </li>
                                    <li><lable for=question>1st Question:</lable><input name="question" id="question" type="text" size="66"  /> </li>
                                    <li><lable for=answerType>Constrained:</lable><input name="answerType" id="answerType" value="Constrained" type="radio" size="66"  /><span style="margin: 0 0 0 40px;">
                                    Unconstrained: <input style="margin-right: 30px;" name="answerType" value="Unconstrained" id="question" type="radio" size="66"  /></span>(Allow multiple answers) </li>
                                    <li><lable for=answer1>Answer:</lable><input name="answer1" id="answer1" type="text" size="66" /> </li>
                                    <li><lable for=answer2>Answer:</lable><input name="answer2" id="answer2" type="text" size="66" /> </li>
                                    <li><lable for=answer3>Answer:</lable><input name="answer3" id="answer3" type="text" size="66" /> </li>
                                    <li><lable for=answer4>Answer:</lable><input name="answer4" id="answer4" type="text" size="66" /> </li>

                            </ol><br />
                        </fieldset>
            <input type="button" value="Add More Answers" name="addAnswer" onClick="generateRow()" /><input type="submit" name="submit" value="Add Another Question">
</form>

这里是 generateRow():

var count = 5;

function generateRow() {
    var d=document.getElementById("contact");
    var b = document.getElementById("answer4");
    var c =b.name.charAt(0);
    var f = b.name.substr(0, 6);
    var y = f + count;
    count = count + 1;
    d.innerHTML+='<li><lable for=' + y + '>Answer:</lable><input name="' + y + '" id="' + y    + '" type="text" size="66"/> </li>';
}

问题在于，每当添加新行时，它都会删除可能已在任何非原始（添加）文本字段中键入的任何输入。它应该将数据留在表单元素中

【问题讨论】：

<lable> 标签不存在。你的意思是<label>（美式拼写）
相关：stackoverflow.com/questions/1388893/…

标签： javascript html

【解决方案1】：

当您设置innerHTML 属性时，浏览器会解析 HTML 并为其创建一个新的 DOM 树，然后用新的 DOM 树替换当前的 DOM 树。这会破坏任何不在 HTML 中的数据。

您需要使用createElement 和appendChild 或使用jQuery 附加DOM 元素（更简单）。

【讨论】：

【解决方案2】：

给<ol>元素一个ID：

<ol id="answers">
    ...
</ol>

然后将函数中的第一行更改为：

var d=document.getElementById("answers");

进行上述更改后，它应该可以工作。我已经在 Firefox、Chrome、Safari 和 IE8 中对其进行了测试。正如其他人所提到的，您还应该更正“标签”的拼写。

【讨论】：

确实有效。非常感谢。我还修正了我的拼写 =P
@Jordan 很高兴您发现我的回答很有帮助。您可以通过单击答案分数下方的“检查”符号来接受答案。我认为您甚至可以为此获得徽章。欢迎来到 SO！

【解决方案3】：

HTML 元素的value 属性未更新以反映输入元素的当前值...see this related question

您可以通过使用createElement 和appendChild 完全避免使用innerHTML 属性。

代替：

d.innerHTML+='<li><lable for=' + y + '>Answer:</lable><input name="' + y + '" id="' + y    + '" type="text" size="66"/> </li>';

你可以试试：

var li = document.createElement('li');
li.for = y;
li.innerHTML = 'Answer:'

var input = document.createElement('input');
input.name=y;
input.id = y;
input.size=66;

d.appendChild(li);
d.appendChild(input);

【讨论】：

【解决方案4】：

一方面，尝试拼写“标签”而不是“标签”。另一方面，您正在设置 d 的“innerHTML”属性，因此当然要清除所有现有值。

【讨论】：