I have a DIV element that is on my page, I would like to know whether i can insert some html elements into the div after a button is pushed by the user. Basically, i want the DIV element to start out empty and only load the contents once a button is clicked by the user.

I know i can do this by creating elements in JavaScript/jQuery and then insert them into the DIV, however i would rather be able to create some standard HTML code and then have the entire thing loaded, It would save a lot of time for me.

Like, for example, how would it be possible to insert the following html markup into a div?

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

Any ideas, btw, im using JQuery if that helps in creating a solution.

I have a DIV element that is on my page, I would like to know whether i can insert some html elements into the div after a button is pushed by the user. Basically, i want the DIV element to start out empty and only load the contents once a button is clicked by the user.

I know i can do this by creating elements in JavaScript/jQuery and then insert them into the DIV, however i would rather be able to create some standard HTML code and then have the entire thing loaded, It would save a lot of time for me.

Like, for example, how would it be possible to insert the following html markup into a div?

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

Any ideas, btw, im using JQuery if that helps in creating a solution.

• javascript
• jquery
• html
• dom

7 Answers 7

Sounds like you want to use templating. There are multiple ways of doing that in jQuery, but it basically involves you creating your template, binding it to data, and then inserting it to your element.

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

You can just have the HTML on the page and hidden, then upon clicking a button just show that 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>

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

Improved readability:

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

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

Try 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();

Here is example

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

YOU CAN

<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>

OR

<SCRIPT>
// AND WITH "#" AND NAME ONLY ONE BUTTON HAVE THIS FUNCTION
$("#buttonAction").click(function() {
    $("#local").html('<input type="text" size="15" id="textFieldname">');
    $("#textFieldname").val('GREAT!');
 });
</SCRIPT>

OR USE JAVASCRIPT...

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

ATTRIB .html FROM JQUERY is innerHTML in JAVASCRIPT!

If you use JAVASCRIPT, you can set onclick action into object and create a function.

SEE A EXAMPLE RUNNING http://jsfiddle/rogeriodemoraes/tcb3e2of/

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