Вставить элементы HTML в элемент div?

Question

У меня есть элемент DIV, который находится на моей странице, я хотел бы знать, могу ли я вставить некоторые элементы HTML в элемент div после нажатия пользователем кнопки. По сути, я хочу, чтобы элемент DIV начинался пустым и загружал содержимое только после нажатия пользователем кнопки.

Я знаю, что могу сделать это, создавая элементы в JavaScript / jQuery и затем вставляя их в DIV, однако я предпочел бы создать некоторый стандартный HTML-код и затем загрузить все это, это сэкономит много время для меня.

Как, например, как можно вставить следующую HTML-разметку в div?

<label>Name: <label><input id="iptName"></input>  
<label>Age: <label><input id="iptAge"></input>  
<button>Click Me</button>

Любые идеи, между прочим, я использую JQuery, если это помогает в создании решения.

Answer 1

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

$('#myDiv').append($('#myTemplate').tmpl(someData))

Answer 2

Вы можете просто оставить HTML-код на странице и скрыть его, а затем, нажав кнопку, просто показать этот HTML-код.

<div id="container-div">    
    <div id="hidden-html" style="display:none;">
      <label>Name: <label><input id="iptName"></input>
      <label>Age: <label><input id="iptAge"></input>
      <button>Click Me</button>
    </div>
</div>

<a href="#" onclick="$('#hidden-html').show(); return false;"> Show </a>

Answer 3

div.innerHTML = '<label>Name: <label><input id="iptName"></input><label>Age: <label>input id="iptAge"></input><button>Click Me</button>';

Улучшена читаемость:

div.innerHTML = [
    '<label> Name: <input id="iptName"> <label>',
    '<label> Age: <input id="iptAge"> <label>',
    '<button> Click Me </button>'
].join('');

Answer 4

<div id="local"></div><button id="buttonAction">CLICK HERE</button>

ВЫ МОЖЕТЕ

<SCRIPT>
// FOR ALL BUTTON / WITH ":" and TYPE OBJECT ALL BUTTON HAVE FUNCTION
$(":button").click(function() {
    $("#local").html('<input type="text" size="15" id="textFieldname">');
    $("#textFieldname").val('GREAT!');
 });
</SCRIPT>

ИЛИ

* * 1010

ИЛИ ИСПОЛЬЗОВАТЬ JAVASCRIPT ...

document.getElementById("local").innerHTML = '<input type="text" size="15" id="textFieldname">';

ATTRIB .html ОТ JQUERY является внутренним HTML в JAVASCRIPT!

Если вы используете JAVASCRIPT, вы можете установить действие по нажатию на объект и создать функцию.

СМ. ПРИМЕР РАБОТЫ http://jsfiddle.net/rogeriodemoraes/tcb3e2of/

Answer 5

Попробуйте Jnerator :

var jtag = $j.tagList([
    $j.label({ 'for': 'iptName', child: 'Name: ' }),
    $j.inputText({ id: 'iptName' }),
    $j.label({ 'for': 'iptAge', child: 'Name: ' }),
    $j.inputText({ id: 'iptAge' }),
    $j.button({ child: 'Click Me' })
]);
tagContainer.innerHTML = jtag.html();

Вот пример

Answer 6

$('button').click(function(){$('div').html('Stuff to be inserted into DIV');});

Answer 7

$('#myDiv').html(...);   // your HTML text here