Is it possible to add JSF Components using javascript? In my case , on change of a select option , i need to display a different combination of input controls (like text box(s)). I thought i could use a element and innerHTML property to display the dynamic controls.But it seems to not work!!!

<h:selectOneMenu id="browseType" class="TextBlackNormal"
                            value="#{adminBean.browseType}" onchange="showDynamicBox(this);"
                            valueChangeListener="#{adminBean.theValueChanged}">
                            <f:selectItems value="#{adminBean.browseTypeList}" />
                        </h:selectOneMenu> &#160;&#160;&#160;</td>
                        <td>
                        <div id="dynamicBox" style="display:block"><h:inputText
                            class="TextBlackNormal" size="32" name="browseValue"
                            id="browseValue" value="#{adminBean.browseValue}" /></div>
                        </td>

javascript code : ~~~~~~~~~~~~~~~~

  function showDynamicBox(selectObjj)
{
    //alert('showDynamicBox ' +showDynamicBox);
    if(selectObjj.options[selectObjj.selectedIndex].value=='IBD/Office/IP'
        || selectObjj.options[selectObjj.selectedIndex].value=='APA#' )
    {
        alert('just about to change');
        document.getElementById("dynamicBox").innerHTML='<h:inputText class="TextBlackNormal" size="3" name="val1" id="val1" /> <h:inputText class="TextBlackNormal" size="3" name="val2" id="val2" /> <h:inputText class="TextBlackNormal" size="3" name="val3" id="val3" /> ';
        alert(' --> ' +document.getElementById("dynamicBox").innerHTML);
    }else{
        alert('back to pavillion');
        document.getElementById("dynamicBox").innerHTML='<h:inputText class="TextBlackNormal" size="32" name="browseValue" id="browseValue" value="#{adminBean.browseValue}" />';
    }

}