Javascript onclick Inhalt von HTML ändern

Question

Ich füge neue div hinzu, wenn der Benutzer auf die blaue Schaltfläche klickt, aber jedes Mal, wenn der Benutzer auf die Schaltfläche klickt, wird der gesamte HTML-Inhalt ausgeblendet, ich brauche eine Lösung dafür. Ist es auch möglich, eine Animation hinzuzufügen?

Hier ist die Demo drücken Sie einfach die blaue Taste, geben Sie etwas ein und drücken Sie die blaue Taste erneut.

https://jsfiddle.net/61tbq4q6/2/ 

Dies ist html Teil:

var i = 1; 
$("#ebookParts").click(function() { 
     var container = document.getElementById("myContainerDiv"); 
    var html = document.getElementById('myContainerDiv').innerHTML; 
    html = html + "<div class=\"col-sm-12\">" 
    + "<div class=\"form-group\">" 
    + "<div class=\"col-sm-6\"><label>Name</label><input class=\"form-control\" type=\"text\" name=\"display_name[]\"></div>" 
    + "<div class=\"col-sm-2\"><label>Part</label><input class=\"form-control\" type=\"text\" name=\"part[]\" value=" + i + "></div>" 
    + "<div class=\"col-sm-2\"><label>Pages between</label><input class=\"form-control\" type=\"text\" name=\"pages[]\"></div>" 
    + "<div class=\"col-sm-2\"><label>price</label><input class=\"form-control\" type=\"text\" name=\"price[]\"></div>" 
    + "</div>" 
    + "</div>"; 
    container.innerHTML= html; 
    i++; 
    return false; 
}); 

Answer 1

Wenn Sie das Problem da sagen, ist, dass alles, was der Benutzer manuell in einen Eingang eingegeben wird verschwinden:

<input type="button" id="ebookParts" value="&#xf067;" class="custBut"> 

<div id="myContainerDiv"> 

</div> 

Dies ist die JS ist Es liegt daran, dass Sie diese Eingaben löschen und durch neue ersetzen, wenn Sie container.innerHTML = html tun. Ihre ursprüngliche Zuordnung zu var html = ... erfasst nur tatsächliche Attribute, keine JS-Eigenschaften.

Was Sie tun müssen, wenn Sie neue DOM-Elemente mit HTML anhängen, während Sie den alten Inhalt beibehalten, verwenden Sie .insertAdjacentHTML anstelle von .innerHTML.

Anstatt das vorhandene DOM zu übernehmen, es in HTML-Markup zu konvertieren, mehr HTML hinzuzufügen und die alten DOM-Elemente durch neue aus HTML zu ersetzen, erstellen Sie einfach die neuen aus HTML und fügen Sie sie dort hinzu, wo Sie sie haben möchten.

var i = 1; 
$("#ebookParts").click(function() { 
    var container = document.getElementById("myContainerDiv"); 

    var html = "<div class=\"col-sm-12\">" 
    + "<div class=\"form-group\">" 
    + "<div class=\"col-sm-6\"><label>Name</label><input class=\"form-control\" type=\"text\" name=\"display_name[]\"></div>" 
    + "<div class=\"col-sm-2\"><label>Part</label><input class=\"form-control\" type=\"text\" name=\"part[]\" value=" + i + "></div>" 
    + "<div class=\"col-sm-2\"><label>Pages between</label><input class=\"form-control\" type=\"text\" name=\"pages[]\"></div>" 
    + "<div class=\"col-sm-2\"><label>price</label><input class=\"form-control\" type=\"text\" name=\"price[]\"></div>" 
    + "</div>" 
    + "</div>"; 

    // The "beforeend" parameter inserts the new content inside the 
    // container after the existing content. 
    container.insertAdjacentHTML("beforeend", html); 

    i++; 
    return false; 
}); 

Answer 2

Es ist, weil Sie HTML bekommen, als es ändern und dann wieder in Ihre Seite einfügen. Wenn Sie Ihren HTML-Code kopieren, kopieren Sie keine Werte, die bereits in Eingaben übergeben wurden. Stattdessen müssen Sie die .appendChild() -Methode verwenden, und Sie benötigen auch document.createElement()

Answer 3

Wenn Sie nur das div einmal hinzufügen müssen. Dann überprüfe mit einem "if" vor dem div.

var isAdded=false; 
$("#ebookParts").click(function() { 
if(!isAdded){ 
//your code 
} 
});