JavaScriptのonclickはHTMLのコンテンツを変更します

Question

ユーザーが青いボタンをクリックすると新しいdivが追加されますが、毎回ユーザーがボタンをクリックするとHTML全体のコンテンツが消えてしまいます。 また、アニメーションを追加することは可能ですか？

デモは青いボタンを押して、何かを入力してもう一度青いボタンを押してください。

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

これは、htmlの一部です：

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

<div id="myContainerDiv"> 

</div> 

これはJSです：

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

あなたは問題が手動入力に入力されたものは何でも利用者が消えていることであると言っている場合container.innerHTML = htmlを入力すると、それらの入力を破棄して新しいものに置き換えるためです。オリジナルのvar html = ...への割り当てでは、JSプロパティではなく実際の属性のみが取り込まれます。

古いコンテンツを保持しながらHTMLを使用して新しいDOM要素を追加する場合は、.innerHTMLの代わりに.insertAdjacentHTMLを使用する必要があります。

この方法では、既存のDOMをHTMLマークアップに変換し、HTMLを追加して、古いDOM要素をHTMLから生成された新しい要素に置き換えるのではなく、 HTMLを追加し、必要な場所に追加します。

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

これは、HTMLを取得しているためです。変更するよりも、ページに再度挿入するよりです。あなたのhtmlをコピーすると、既に入力を渡した値はコピーされません。この代わりに.appendChild（）メソッドを使用する必要があります。また、document.createElement（）も必要です。

Answer 3

divを1回追加するだけでよい場合は、 divを追加する前に "if"をチェックしてください。

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