Anfügen von HTML-Inhalt mit Jquery

Question

Alles, was ich tun möchte, ist, wenn der Benutzer auf eine Schaltfläche klickt, sollte der Inhalt der div unten anhängen. Mein Code funktioniert gut, wenn ich den Inhalt innerhalb des div im Javascript angezeigt unten einfügen:

Meine Frage:

1.) ohne den Code zu kopieren und einfügen, die in der HTML zu JAVASCRIPT war, ist es eine andere So könnte ich das schaffen.

2.) Ich möchte das name und auch das value Attribut des Eingabefeldes eindeutig sein (wie eine Zahl am Ende anhängen). Wie kann ich das machen ?

Mein jQuery sieht wie folgt aus:

$(document).ready(function(){ 


     $("#btn").click(function(){ 
      $("#boxid").append('<br/> 
<div class="input-group"> 
        <input type="text" class="form-control" id="myid" placeholder="hey" value="2"> 
        <div class="input-group-addon">?</div> 
        </div> 
      '); 
     }); 

    }); 

HTML

<button id="btn">Add another row</button> 
<form action="gone/" method="get"> 
<div id="boxid"> 
        <div class="input-group"> 
        <input type="text" class="form-control" id="myid" placeholder="hey" value="2"> 
        <div class="input-group-addon">?</div> 
        </div> 

</div> 
</form> 

Answer 1

Sie können $.clone() verwenden.

$(document).ready(function() { 
 
    var counter = $('.form-control').last().val();//Get the last .form-control value, in case you decide to have more than one by default (this way the counter can start from 2 e.g) 
 
    $("#btn").click(function() { 
 
     counter++; //Increase counter 
 
     $("#boxid").append($('.input-group').eq(0).clone()); //Clone the existing first .input-group 
 
     $("#boxid .input-group").last().find('.form-control').attr('name', counter).val(counter); //Select the last appended .input-group, find the .form-control input, change input's name and value with the counter 
 
    }); 
 
});

.input-group{ 
 
    margin-bottom: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btn">Add another row</button> 
 
<form action="gone/" method="get"> 
 
    <div id="boxid"> 
 
     <div class="input-group"> 
 
      <input type="text" class="form-control" id="myid" placeholder="hey" value="1" name="1"> 
 
      <div class="input-group-addon">?</div> 
 
     </div> 
 
    </div> 
 
</form>

• initialisieren Zähler mit dem Wert des letzten Eingabe
• Bei Klick auf #btn Erhöhung Zähler.
• Append an #boxid der Klon der ersten (.eq (0)) .input-group (Es ist nicht wirklich wichtig, wenn es die erste ist, nur als erste = Vorlage verwendet).
• Wählen Sie die letzte .input-group innerhalb #boxid und ändern Sie name und Wert mit dem Zähler.
• Ich verließ Ihr <br> hinter, ist heute nicht mehr, ein richtiger Weg ist mit CSS-Marge (eine Marge von 1em ist wie 1 Textzeile)

Answer 2

Wenn ich so etwas wie dieses müssen, ist, verwende ich eine versteckte div enthält Templatelemente. Wann immer ich eine Realisierung einer Vorlage brauche, kopiere ich einfach die Vorlage, ändere einige Platzhalter und füge sie meinem Zielelement hinzu.

PS: include https://jsfiddle.net/cvf2f7dn/1/ von @Illep

css

#templates { display: none } 

html

<div id="targetDiv"></div> 
<div id="templates"> 
    <div id="templeateForInputGroup"> 
    <div class="input-group"> 
     <input type="text" class="form-control" id="myid%%counter%%" placeholder="hey" value="%%counter%%"> 
     <div class="input-group-addon">?</div> 
    </div> 
    </div> 
</div> 
<button id="addmore">Add more</button> 

js

$('#addmore').click(add); 

String.prototype.replaceAll = function(search, replacement) { 
    var target = this; 
    return target.replace(new RegExp(search, 'g'), replacement); 
}; 

var counter = 0; 
function add(){ 
    var cloneHTML = $('#templeateForInputGroup').html().toString(); 
    cloneHTML = cloneHTML.replaceAll('%%counter%%', counter); 
    counter++; 
    $('#targetDiv').append(cloneHTML); 
} 

Answer 3

diesen Code Versuchen:

$(document).ready(function(){ 


     $("#btn").click(function(){ 

if(checkUnique('myid')){//to check unique id 
      $("#boxid").append('<br/> 
<div class="input-group"> 
        <input type="text" class="form-control" id="myid" placeholder="hey" value="2"> 
        <div class="input-group-addon">?</div> 
        </div> 
      '); 
} 

else{ 
$("#boxid").append('<br/> 
<div class="input-group"> 
        <input type="text" class="form-control" id="myid1" placeholder="hey" value="2"> 
        <div class="input-group-addon">?</div> 
        </div> 
      '); 
} 
     }); 

    }); 

function checkUnique(ex){ 
if($('#'+ex).length==0){ 
return true;} 
else 
{return false;} 
}