Please help! Basic HTML/JS Web Development Question

I have the below problem where I am trying to get the code from appleImg and pearImg to be put into an html element called middleCell should a button be clicked and based off a value of an input (input1). How can I make this work?

         <table border="1">
            <tr>
                <td>
                 <input id="input1">
                 <button id="leftButton" onclick="fruitTest();">Enter</button>
                </td>
                <td>
                    <p id="middleCell">Hello</p>
                </td>
                <td>
                 <button id= "clearButton" onclick="clearBox();">Clear</button>   
                </td>
            </tr>
        </table>

var appleImg = "<img src="https://codehs.com/uploads/afcd3bf7ea7baf3f7d571c6e24c352af">";
var pearImg = "<img src="https://codehs.com/uploads/e0c442f8c020685fc8016f15c2547f1e">";


// Add your JavaScript code bel
var middleCell = document.getElementById("middleCell");
function fruitTest(){
    var myInput = document.getElementById("input1");
    var inputValue = myInput.value;
    if (inputValue > 100){
       middleCell.innerHtml = appleImg;
    } else if (inputValue < 0){
        middleCell.innerHtml = pearImg;
    }
} 
function clearBox (){
    middleCell.innerHtml = "";
}

I wanted the value of the middleCell to show the images based of what was entered. When 101 is enetered and button clicked, the appkle image should show up.

Also, when clicking clear, the middleCell shoould be clear. Please help!