[SalesForce] Clear inputText field on command button click

This seems to be pretty simple and common requirement, but not able to make it work in my Vf page.

I have a search command button which queries records and display in tabular format (as shown in code), now i am trying to add a clear command button for resetting the value in inputText Field to empty string, but couldn't achieve the reset/clear behavior with inputText Field. Search string can still be seen in the inputText after clicking clear button.

<apex:page standardController="Object__c" extensions="ObjectControllerExt" id="page" sidebar="false">
<apex:form id="form">
    <apex:pageMessages id="errors" />
    <apex:pageBlock id="pgtable" Title="Application Search Section" >
            <table width="100%" border="0">
                <tr>  
                    <td width="200" valign="top">
                        <apex:pageBlock id="reqNo" title="Enter Request Number">
                            <apex:inputText id="srchFld" value="{!searchKey}" /> 
                            <apex:commandButton value="Search" action="{!runSearch}" reRender="results,errors"/>  
                            <apex:commandButton id="cmdClear" value="Clear" onclick="clearSearchField('{!$Component.srchFld}')" reRender="results,errors"/> 
                            <!-- I have a action controller method on 'clear' command button to clear the value in 'searchKey' -->
                            <apex:outputText id="ot" value="Test"/> <!-- works for outputText -->
                        </apex:pageBlock>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <apex:pageBlock id="results">
                            <apex:pageBlockTable value="{!requests}" var="p">
                                <apex:column >
                                   <apex:facet name="header">Request ID</apex:facet>
                                   <apex:outputText value="{!p.Name}" />
                                </apex:column>
                                <apex:column >
                                    <apex:facet name="header">Request Status</apex:facet>
                                    <apex:outputText value="{!p.RequestStatus__c}"/>
                                </apex:column>
                                <apex:column>
                                    <apex:facet name="header">Req Description</apex:facet>
                                    <apex:outputText value="{!p.SKU_Desc__c}"/>
                                </apex:column> 
                            </apex:pageBlockTable>
                        </apex:pageBlock>
                    </td>
                </tr>
            </table>
    </apex:pageBlock>
  </apex:form> 
<script>
   function clearSearchField(searchField) {
     var v = document.getElementById(searchField).value;
     console.log(v);
     document.getElementById(searchField).innerHTML = ''; 
     var k = document.getElementById(searchField).value;
     console.log(k);
     document.getElementById('page:form:pgtable:reqNo:ot').innerHTML = 'Test - update'; // This one works 
   }
  </script>
</apex:page>

Appreciate your time in pointing what's going wrong here.

Thanks!