Как динамически добавлять текстовые поля в кнопку мыши Использование JavaScript

Question

при нажатии на кнопку, я хочу добавить, что 4 и этикетки Textboxes ниже panel.that 4 управления должны воссоздать в каждой кнопки с помощью JavaScript. Я новичок в javascript.Пожалуйста, помогите мне ..

Answer 1

Вы создаете их раньше. По умолчанию вы устанавливаете свою видимость как «скрытую». В действии кнопки вы вызываете функцию javascript, которая устанавливает видимость как видимую.

Просто ответьте, если вам нужно больше направлений для этого.

Answer 2

Надежда эта работа, и вы никогда не возражаю 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 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' />" 
} 

Если вам нужно упорядочить вывод, показанный на картинке, вам необходимо включить ярлык и текстовое поле внутри таблицы. то это будет выглядеть так: