Einfügen von HTML-Elemente in ein div-element?

Ich habe ein DIV-element auf meiner Seite, ich würde gerne wissen, ob ich das einfügen kann einige html-Elemente in div-nachdem eine Taste gedrückt wurde, durch den Benutzer. Im Grunde genommen, ich möchte das DIV-element zum starten zu leer, und nur die Inhalte lädt, sobald ein button geklickt wird, durch den Benutzer.

Ich weiß, ich kann dies tun, indem Sie Elemente in JavaScript/jQuery und dann legen Sie Sie in das DIV, aber ich würde eher in der Lage, auf der einige standard-HTML-code und haben dann die ganze Sache geladen, Es würde sparen eine Menge Zeit für mich.

Wie, zum Beispiel, wie wäre es möglich, fügen Sie das folgende html-markup in ein div?

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

Irgendwelche Ideen, btw, im Einsatz von JQuery, falls das hilft bei der Schaffung einer Lösung.

InformationsquelleAutor Tom Green | 2011-04-05

  1. 2

    Klingt wie Sie verwenden möchten templating. Es gibt mehrere Möglichkeiten, in jQuery, aber im Grunde umfasst Sie die Erstellung Ihrer Vorlage, binden an Daten, und dann einsetzen, um Ihrem element. 

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

    InformationsquelleAutor Tejs

  2. 2

    Können Sie müssen nur den HTML-Code in die Seite und versteckt, dann bei Klick auf eine Schaltfläche nur zeigen, dass 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>
    In Abhängigkeit von der Nutzung, mit .toggle() statt .show () - werden abwechselnd ein - /ausblenden, div bei button-Klick.

    InformationsquelleAutor Bobby Borszich

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

    Verbesserte Lesbarkeit:

    div.innerHTML = [
    '<label> Name: <input id="iptName"> <label>',
    '<label> Age: <input id="iptAge"> <label>',
    '<button> Click Me </button>'
].join('');
    Die ursprüngliche Frage nicht, sage nichts über das tun dies serverside mit asp.net webforms
    Was asp.net webforms?

    InformationsquelleAutor Šime Vidas

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

    InformationsquelleAutor Alnitak

  5. 0

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

    Hier ist ein Beispiel

    InformationsquelleAutor Berezh

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

    KÖNNEN SIE

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

    ODER 

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

    ODER JAVASCRIPT VERWENDEN...

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

    ATTRIB .html VON JQUERY in JAVASCRIPT innerHTML!

    Wenn Sie JAVASCRIPT verwenden, können Sie festlegen, onclick-Aktion in Objekt-und eine Funktion erstellen.

    FINDEN SIE EIN BEISPIEL FÜR DIE AUSFÜHRUNG http://jsfiddle.net/rogeriodemoraes/tcb3e2of/

    Folgen Sie dem Beispiel und verwenden, wie Sie brauchen,

    InformationsquelleAutor Rogerio de Moraes

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

    InformationsquelleAutor Jonathan

Schreibe einen Kommentar