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

【问题标题】：text is replacing image instead of being shown upon it文本正在替换图像而不是显示在其上
【发布时间】：2011-10-04 02:59:01
【问题描述】：

我最近开始学习 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>';
    }

我的问题是我的图像被函数的文本替换，而不是显示在上面。我已经尝试了很多东西，但没有成功。我做错了什么？

感谢您的宝贵时间！

【问题讨论】：

【解决方案1】：

问题是您正在覆盖“记事本”中的 HTML。将函数改为：

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

【讨论】：

由于它们是新的并且正在学习，因此指出 Griffin 的解决方案是附加（使用 += 运算符而不是 = 运算符）html 而不是分配和替换它可能是有益的。
@Jake，我想 +1 你的评论，但显然我做不到。
感谢大家的快速回复！顺便说一句，您还回答了我对 innerHTML 的一些问题 :) Griffin 的这个正是我想要的，我现在可以看到我做错了什么。下次再来！

【解决方案2】：

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

你可能想要...

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

【讨论】：