CODEWITHSUNDEEP
javascriptjqueryhtmldom
Tom Green
Tom Green

Reputation: 11

Inserting HTML elements into a div element?

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.

Upvotes: 1

Views: 16778

Answers (7)

Rogerio de Moraes
Rogerio de Moraes

Reputation: 1577

<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.net/rogeriodemoraes/tcb3e2of/

Upvotes: 0

Berezh
Berezh

Reputation: 937

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

Upvotes: 0

Jonathan
Jonathan

Reputation: 76

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

Upvotes: -1

Bobby Borszich
Bobby Borszich

Reputation: 11767

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>

Upvotes: 2

Tejs
Tejs

Reputation: 41236

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

Upvotes: 2

Šime Vidas
Šime Vidas

Reputation: 185883

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

Upvotes: 1

Alnitak
Alnitak

Reputation: 339786

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

Upvotes: 0

Related Questions