如何使用innerHTML將文本置於圖像上？

Question

我正在使用調用JavaScript函數的onkeyup實現輸入文本。我必須將該文本放在圖像上，所以我正在考慮在圖像上的div內使用innerHtml。

股利：

<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4"> 
    <div id="uno" style="z-index:20"> 
     <img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205> 
    </div> 
</div> 

輸入：

<input name="formtext1" id="ft1" style="position:absolute;width:571px;left:319px;top:194px;z-index:6" onkeyup="go(this.value)"> 

中的JavaScript：

<script type="text/javascript"> 
    function go(asd){ 
     document.getElementById('uno').innerHTML=asd; 
    } 
</script> 

當我寫裏面輸入文本圖像會消失，文字顯示背景爲白色。你能幫我解決爲什麼發生這種情況以及我能做些什麼嗎？

Answer 1

設置innerHTML將刪除原來在div中的內容。 一個解決這個問題的辦法是將HTML改爲

<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4"> 
    <div id="uno" style="z-index:20"> 
    <div id="input"></div> 
    <img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205> 
    </div> 
</div> 

然後在輸入DIV而不是使用innerHTML。