如何使用javascript在按钮单击中动态添加文本框

Question

点击按钮时我想在面板下面添加4个标签和文本框。应该使用javascript在每个按钮中重新创建4个控件。 我是javascript的新手。请帮帮我..

Answer 1

希望这项工作，你不介意我猜jQuery

 $('.button').on('click', function(){
       $('.appnd-class').append("<label> Name </label> <input type='text'/><label> Age </label> <input type='text'/><label> Address </label> <input type='text'/><label> Office </label> <input type='text'/>")

    });

Answer 2

您之前创建它们。默认情况下，您将其可见性设置为＆＃34;隐藏＆＃34;。在按钮操作中，您可以调用javascript函数，该函数将可见性设置为可见。

如果您需要更多指导，请回答。

Answer 3

我通常将这样的内容保存为模板，然后将它们添加到页面中......

var template = ""+ 
"<select id='etc'>" +
    "<option value='one'>One</option>"+
    ...
"</select>"

然后只需将它们添加到页面

$("#button").click(function(){
    $( template ).appendTo($("#thedivyouwant") );
});

Answer 4

尝试以下

<div id="div1"></div>
<input type="button" id="mybutton" />

的javascript

 $(document).ready(function () {
        $("#mybutton").click(function () {
    document.getElementById("div1").innerHTML="<input type='textbox' />"

});
});

像这样你可以在你的Ui中添加你想要的所有控件

DEMO

如果你需要纯粹的javascript那么

<div id="div1"></div>
 <input type="button" id="mybutton" onclick="myfun()"/>

然后javascript

function myfun()
{
  document.getElementById("div1").innerHTML="<input type='textbox' />"
}

如果您需要排列图片中显示的输出，则需要在表格中包含标签和文本框。然后它看起来像那样