текст заменяет изображение, а не показывается на нем

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

Вы заменяете innerHTML элемента с идентификатором notepad.Он не будет выполнять выборочную замену, он перезапишет весь внутренний HTML.

Возможно, вы захотите что-то вроде ...

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