parse HTMLElmentObject with innerHTML in javascript -

i building cat clicker game. have 5 cat , each 1 has click function increase count on every click.

i have created dom javascript function, have create image document.create method can attached event it. javascript code contains both pure html , htmlelementobj. fiddle.

but innerhtml not paring element creating document.createelement

function fac(name) {   this.name = name;   this.count = 0; }  var cats = ['cat1', 'cat2', 'cat3', 'cat4', 'cat5']  function $(name) {   return document.queryselector(name); } var html = ""; (var = 0; < cats.length; i++) {   var cat = new fac(cats[i])   html += "<div>";   html += "<div>" + cat.name + "</div>";   var elem = document.createelement('img');   elem.src = 'https://c2.staticflickr.com/2/1126/625069434_db86b67df8_n.jpg';   html += elem;   html += "<div class='count " + + "'></div>";   html += "</div>";   elem.addeventlistener('click', function() {     $('.count' + i).innertext = ++cat.count;   }, false);   $('#getclicked').innerhtml = html  } 

you mixing strings , dom elements , won't work. strings

 html += "<div>";   html += "<div>" + cat.name + "</div>";   var elem = "<img src='https://c2.staticflickr.com/2/1126/625069434_db86b67df8_n.jpg'>";   html += elem;   html += "<div class='count " + + "'></div>"; 

or dom elements (a bit more learning needed start better in long run)