Contenteditable add something with event without replace

Question

i want to add a images on the fly with event click and it not replace the currenly something inside div.

my currently code look like this.

HTML

<div id="btn"><img src="images/Leviathan.png"></div>
<div id="ctn" contenteditable="true"></div>

JavaScript

<script>
var btn = document.getElementById('btn');
var ctn = document.getElementById('ctn');

btn.addEventListener('click', function(){
ctn.innerHTML = btn.innerHTML;}, false);
</script>

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 <img src="foo.jpg"> "

nb: Answer it on JavaScript not JQuery. thank you for reading :)

Answer 1

使用+

 ctn.innerHTML += btn.innerHTML;

Answer 2

You could use appendChild() http://www.w3schools.com/jsref/met_node_appendchild.asp

var ctn = document.getElementById('ctn');
ctn.appendChild(document.getElementById('btn'));

(Maybe it's better to assign the id to the img tag, then)