title: Contenteditable add something with event without replace
body: <p>i want to add a images on the fly with event <strong>click</strong> and it not replace the currenly something inside div.</p>
  
  <p>my currently code look like this.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="btn"&gt;&lt;img src="images/Leviathan.png"&gt;&lt;/div&gt;
  &lt;div id="ctn" contenteditable="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>&lt;script&gt;
  var btn = document.getElementById('btn');
  var ctn = document.getElementById('ctn');
  
  btn.addEventListener('click', function(){
  ctn.innerHTML = btn.innerHTML;}, false);
  &lt;/script&gt;
  </code></pre>
  
  <p>my currently code is it replaces what i have add to div. let's say inside div. there's a text "Stackoverflow is awesome". when i clicked on images it replace to . it not just add "Stackoverflow is awesome <code>&lt;img src="foo.jpg"&gt;</code>"</p>
  
  <p>nb: Answer it on JavaScript not JQuery. thank you for reading :)</p>