文本正在替換圖像，而不是顯示在它上面

Question

我最近開始學習HTML，CSS和Javascript，並且我越來越瞭解當天越來越多的東西..無論如何，我有這個類在我的身體，顯示圖片：

<div class="notepad" id="notepad"> 
    <img src="images/notepad.jpg" alt="Notepad"/> 
    <p class="notepad">test</p> 
</div> 

而且我也有一個JavaScript文件中這樣的功能：

function textonimage(){ 
     document.getElementById("notepad").innerHTML = 
     '<p class="notepad">'+"texty blah blah"+'</p>'; 
    } 

我的問題是，我的形象得到由該函數的文本替換，而不是在它被顯示。我嘗試了很多東西，但沒有成功。我究竟做錯了什麼？

謝謝你的時間！

Answer 1

的問題是，要覆蓋HTML中的「記事本」。改變功能爲：

function textonimage(){ 
    document.getElementById("notepad").innerHTML += 
    '<p class="notepad">'+"texty blah blah"+'</p>'; 
} 

Answer 2

您將替換編號爲notepad的元素的innerHTML。它不會做選擇性替換，它會覆蓋整個內部HTML。

你可能要像...

function textonimage(){ 
    document 
    .getElementById("notepad") 
    .getElementsByTagName('p')[0] 
    .innerHTML = "texty blah blah"; 
}