Javascript在单击按钮时创建新的文本框

我有一个javascript函数，在这个函数中，我试图在单击按钮时创建一个新的文本框。但新行正在当前行的下方创建，数据从最上面的行传输到下面的行。 我正在尝试一种方法，通过这种方法，第一行不设为null，第一行的数据按原样重新生成，第二个新行创建为空。 有人能帮我吗

我的代码

 function GetDynamicTextBox() {
            var value1 = document.getElementById("txtName").value;
            var value2 = document.getElementById("txtEmail").value;
            var value3 = document.getElementById("txtPhone").value;
            return '<div> <input name="txtdynamicname" class="textboxSmall" id="txtdynamicname" type="text" value= "' + value1 + '" />&nbsp;' +
                '<input name = "txtdynamicemail" class="textboxSmall" id="txtdynamicemail" type="text" value = "' + value2 + '" />&nbsp;' +
                    '<input name = "txtdynamicphone" class="textboxSmall" id="txtdynamicphone" type="text" value = "' + value3 + '" />&nbsp;' +
                        '<input type="Image" id="txtdynamicbutton" src="Images/Minus.jpg" CausesValidation="false" onclick = "javascript:return RemoveTextBox(this)" /> </div>';
        }

        //Add Textboxes in the div - New Data + Existing Data
        function AddTextBox() {
            if (document.getElementById("txtName").value != "") {
                if (PassengerLimit > 1) {
                    PassengerLimit = PassengerLimit - 1;
                    //Get Text

                    var ExistingData = document.createElement('DIV');
                    ExistingData.innerHTML = Container.innerHTML;

                    var NewData = document.createElement('DIV');
                    // NewData.innerHTML = GetDynamicTextBox() + Container.innerHTML;
                    NewData.innerHTML = Container.innerHTML + GetDynamicTextBox();



                    //Clear All Data
                    Container.innerHTML = "";

                    //append New Data
                    Container.innerHTML = NewData.innerHTML;

                    //append existing Data
                    // Container.appendChild(ExistingData);


                    document.getElementById("txtName").value = "";
                    document.getElementById("txtEmail").value = "";
                    document.getElementById("txtPhone").value = "";
                }
                else {
                    alert("Sorry! You can add only 10 Passengers detail");
                }


            }
            else
            {
                alert("Sorry! Please fill passengers details.");
             //   return true;
            } return false;
        }

函数GetDynamicTextBox（）{ var value1=document.getElementById（“txtName”）.value； var value2=document.getElementById（“txtEmail”）.value； var value3=document.getElementById（“txtPhone”）.value； 返回“”+ ' ' + ' ' + ' '; } //在div中添加文本框-新数据+现有数据 函数AddTextBox（）{ if（document.getElementById（“txtName”）.value！=“”）{ if（PassengerLimit>1）{ PassengerLimit=PassengerLimit-1； //获取文本 var ExistingData=document.createElement（'DIV'）； ExistingData.innerHTML=Container.innerHTML； var NewData=document.createElement（'DIV'）； //NewData.innerHTML=GetDynamicTextBox（）+Container.innerHTML； NewData.innerHTML=Container.innerHTML+GetDynamicTextBox（）； //清除所有数据 Container.innerHTML=“”； //附加新数据 Container.innerHTML=NewData.innerHTML； //附加现有数据 //Container.appendChild（现有数据）； document.getElementById（“txtName”）.value=“”； document.getElementById（“txtEmail”）.value=“”； document.getElementById（“txtPhone”）.value=“”； } 否则{ 警报（“对不起！您只能添加10名乘客的详细信息”）； } } 其他的 { 提醒（“对不起！请填写乘客详细信息”）； //返回true； }返回false； } 第一张图片

---

---

第二张图像

 function GetDynamicTextBox() {
            var value1 = document.getElementById("txtName").value;
            var value2 = document.getElementById("txtEmail").value;
            var value3 = document.getElementById("txtPhone").value;
            return '<div> <input name="txtdynamicname" class="textboxSmall" id="txtdynamicname" type="text" value= "' + value1 + '" />&nbsp;' +
                '<input name = "txtdynamicemail" class="textboxSmall" id="txtdynamicemail" type="text" value = "' + value2 + '" />&nbsp;' +
                    '<input name = "txtdynamicphone" class="textboxSmall" id="txtdynamicphone" type="text" value = "' + value3 + '" />&nbsp;' +
                        '<input type="Image" id="txtdynamicbutton" src="Images/Minus.jpg" CausesValidation="false" onclick = "javascript:return RemoveTextBox(this)" /> </div>';
        }

        //Add Textboxes in the div - New Data + Existing Data
        function AddTextBox() {
            if (document.getElementById("txtName").value != "") {
                if (PassengerLimit > 1) {
                    PassengerLimit = PassengerLimit - 1;
                    //Get Text

                    var ExistingData = document.createElement('DIV');
                    ExistingData.innerHTML = Container.innerHTML;

                    var NewData = document.createElement('DIV');
                    // NewData.innerHTML = GetDynamicTextBox() + Container.innerHTML;
                    NewData.innerHTML = Container.innerHTML + GetDynamicTextBox();



                    //Clear All Data
                    Container.innerHTML = "";

                    //append New Data
                    Container.innerHTML = NewData.innerHTML;

                    //append existing Data
                    // Container.appendChild(ExistingData);


                    document.getElementById("txtName").value = "";
                    document.getElementById("txtEmail").value = "";
                    document.getElementById("txtPhone").value = "";
                }
                else {
                    alert("Sorry! You can add only 10 Passengers detail");
                }


            }
            else
            {
                alert("Sorry! Please fill passengers details.");
             //   return true;
            } return false;
        }

在GetDynamicTextBox（）中，您可以尝试获取一个简单的html结构，而不使用init值并使用它

函数GetDynamicTextBox（）{

返回“”+
' ' +
' ' +
' ';
}
//在div中添加文本框-新数据+现有数据
函数AddTextBox（）{
if（document.getElementById（“txtName”）.value！=“”）{
if（PassengerLimit>1）{
PassengerLimit=PassengerLimit-1；
//获取文本
var ExistingData=document.createElement（'DIV'）；
ExistingData.innerHTML=Container.innerHTML；
var NewData=document.createElement（'DIV'）；
//NewData.innerHTML=GetDynamicTextBox（）+Container.innerHTML；
NewData.innerHTML=Container.innerHTML+GetDynamicTextBox（）；
//清除所有数据
Container.innerHTML=“”；
//附加新数据
Container.innerHTML=NewData.innerHTML；
//附加现有数据
//Container.appendChild（现有数据）；
}
否则{
警报（“对不起！您只能添加10名乘客的详细信息”）；
}
}
其他的
{
提醒（“对不起！请填写乘客详细信息”）；
//返回true；
}返回false；
}

您能将其放入JSFIDLE并共享吗？使用document.getElementById（'existing_div'）。innerHTML+=new_div@约翰：你能告诉我吗？我试过这个。这样我就丢失了数据。当我单击“提交”时，请单击“提交”。。我附加数据的字符串丢失了..您可以尝试附加它，而不是使用prev texbox元素形成完整的html…因此，您可以在您尝试动态创建的所有这些当前div之上有一个父div，并为父div提供一个id。每次要添加时，获取它的html并附加动态创建的新div一