文本正在替换图像而不是显示在图像上

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

您正在使用ID innerHTML替换元素的notepad。它不会进行选择性替换，它会覆盖整个内部HTML。

你可能想要像...这样的东西。

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