Berk Kaya Berk Kaya - 7 months ago 10
HTML Question

Javascript onclick change content of HTML

I am adding new div when user clicks the blue button but everytime user click button, content of whole html is getting dissappeared i need a solution for it.
Also, is it possible to add an animation to it?

here is the demo just press blue button, type something and hit blue button again.

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


This is html part:

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

<div id="myContainerDiv">

</div>


This is the 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

If you're saying that the problem is that whatever the user manually typed into an input is disappearing, it's because you're destroying those inputs and replacing them with new ones when you do container.innerHTML = html. This completely destroys the old content. Your original assignment to var html = ... only captures actual attributes, not JS properties.

What you need to do if you're going to append new DOM elements by using HTML, while keeping the old ones, is to use .insertAdjacentHTML instead of .innerHTML.

This way, instead of taking the existing DOM, converting it to HTML markup, adding more HTML to it, and replacing the old DOM elements with new ones generated from the HTML, you'll be simply creating the new ones from the HTML and adding them where you want them.

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;
});