HTML unter <input> einfügen

  • Ich habe ein Formular <form>, in dem Benutzer sich für ein Sportturnier anmelden sollen. Dafür habe ich ein <input type="checkbox"> mit Bootrap zu einem well gemacht, damit der User diese Sportart auswählen kann. Wenn der User jetzt den Haken in den die Ckeckbox setzt, würde ich gerne das Formular mit weiteren <input's> erweitern. Dafür habe ich bis jetzt diesen Code:

    Code
    1. <div class="row">
    2. <div class="well well-sm">
    3. <input type="checkbox" name="teilnahme" id="id_teilnahme">
    4. <label for="id_teilnahme">Teilnahme an League of Legends:</label>
    5. </div>
    6. <div class="container-fluid">
    7.         * hier soll der Code eingefügt werden *
    8. </div>
    9. </div>

    und dieses Script:

    Code
    1. var checkbox = document.querySelector("input[name=teilnahme]");
    2. checkbox.addEventListener( 'change', function() {
    3. if(this.checked) {
    4.       <!-- mein Versuch das zu realisieren --!>
    5. this.parentNode.childNodes[1].innerHMTL = "test";
    6. } else {
    7. }
    8. });

    Wenn ich jetzt den Haken checke, soll der zusätliche HTML-Code in <div class="container-fluid">eingefügt werden.

    Wie kann ich das machen ?

  • wie kann ich diesen Code:

    jetzt ohne es selber neu zu erstellen, dem Element e_ hinzufügen ?