Как советует один мой друг - учитесь сразу добавлять элементы правильно, чтобы в дальнейшем с кодом не было проблем!
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="animated" id="imgArr"></div>
<div>
<input type="button" value="Start" id="id"/>
<input type="button" value="Replace" id="id2"/>
</div>
<div>
<script>
var arr = ["img/blue.jpg", "img/bline2.jpg", "img/close.png"];
var arrRep = ["img/site.jpg", "img/x5.jpg"];
var el = document.getElementById('imgArr');
document.getElementById("id").addEventListener('click', function(e) {
for(var i=0; i<arr.length; i++ ){
var img = document.createElement('img');
img.src = arr[i];
el.appendChild(img);
this.removeEventListener(e.type, arguments.callee);
}
}, false);
</script>
</body>
</html>
вот так мы добавляем, дальше пробуйте сами сделать замену
var rand = Math.floor(Math.random()*arrRep.length);
arrRep[rand]; // Это случайный элемент второго массива
синтаксис создания массива будет более компактный через литерал массива.