How to swap data in an array using splice

I have a small problem. I am simply trying to swap the data in the array. I am using splice but its still keeping 1 element there at the end. How do I fully replace the data that is currently there without retaining the other?

$("#test").click(function(){
fruits.splice(0, 1, "Lemon", "Kiwi");
    document.getElementById("demo").innerHTML = fruits;

});
var fruits = ["Banana", "Orange"];

var col1 = ["Banana", "Orange","pies","pretzels"];
var col2 = ["Banana", "Orange"];
document.getElementById("demo").innerHTML = fruits;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Click the button to add and remove elements.</p>

<button id="test" onclick="myFunction();">Try it</button>

<p id="demo"></p>