在动态添加其他文本框时无法保留旧文本框的数据

Question

大家好，我尝试在 Classic ASP 到 JavaScript 中动态添加文本框和其他控件，但遇到了一些问题。

虽然我能够添加新的文本框，但无法保留它们的数据。

例如：如果我有一个按钮并单击我想在第一次单击时将文本框添加到 html 页面，则会添加一个文本框，然后我在该文本框中输入数据，如 Whosebug 但是当我再次点击按钮时还添加了新的文本框 2，但文本框 1 的数据消失了。

我将我的 ASP 代码更改为简单的 HTML，这样就很容易了。这是代码。

 <!DOCTYPE html>
 <html>
 <body>

 <div id ='div1' style="margin-bottom:6px;"></div>
 <button onclick="myFunction()">Change link</button>

 <script>
 function myFunction() {
     var p_strContents = '<input name="cust_name_0" id="cust_name_0" value="" type="text" size="0" class="FormTextField" maxlength="6" title="">';
     document.getElementById('div1').innerHTML = document.getElementById('div1').innerHTML + p_strContents ;
     //document.getElementById('div1').appendChild(p_strContents);
 }
 </script>

 </body>
 </html>

我什至尝试使用 appendchild，但它会抛出一些错误。

如果您想直接在线试用，请使用此 link 并粘贴我的代码，这样你们就可以轻松查看。 http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml

我正在使用 JavaScript。

你们能帮帮我吗？问候...

Answer 1

请检查这个：

function myFunction() {     
    var textBx = document.createElement('input');
    textBx.setAttribute('type', 'textbox');
    textBx.setAttribute('class', 'FormTextField');
    textBx.setAttribute('maxlength', '6');
    document.getElementById('div1').appendChild(textBx);
    textBx = null;
 }

Please check working code here

在动态添加其他文本框时无法保留旧文本框的数据

Cannot retain the data of old Text-boxes on dynamic addition of others

html

javascript

dom

asp-classic