Fala Natali, tudo bem? Espero que sim!
Você pode utilizar o innerHTML
que nos permite obter ou definir o HTML de alguma elemento, para obter o html de um elemento utilizamos:
elemento.inneHTML //Nos retorna todo o HTML que está dentro de um elemento.
Para definir o html de um elemento utilizamos o sinal de igualdade (que significa atribuição):
elemento.innerHTML = '<p>Olá! Eu sou um paragrafo</p>'
No código assima substituimos TODO o html daquele elemento por um parágrafo. Mas... não queremos substituir todo o html daquele elemento, então podemos utilizar o + antes do simbolo de igualdade, que irá atribuir ao valor que ja estava armazado naquela variável o elemento que passarmos:
elemento.innerHTML += '<p>Olá! Eu sou um paragrafo</p>'
Então com esse operador (+=) definimos que o html daquele elemento será o que ja estava mais o parágrafo que definimos.
Obs: O elemento
, deve ser algum elemento, podemos utilizar o querySelector
como você ja esta utilizando para definir qual elemento queremos substituir o HTML, então agora que ja entendeu um pouco como funciona, vamos aplicar ao seu exemplo, em que iremos selecionar algum elemento do seu HTML (nesse exemplo adicionarei uma div vazia no nosso html com o id "resposta" para inserirmos la a nossa resposta):
HTML:
<div id="resposta"></div>
No JavaScript selecionaremos esse elemento de definiremos o html dessa resposta como um parágrafo contendo a resposta:
<script>
function responder(){
var input = document.querySelector("input").value
var respostaDiv = document.querySelector("#resposta")
respostaDiv.innerHTML = "voce digitou: " + input
}
var button = document.querySelector("button")
button.onclick = responder
<\script>
Logo acima tilizamos o querySelector
com o seletor "#resposta" para selecionar aquela div que criamos no html e guardamos na variável respostaDiv, então, como nesta div esta armazenado o nosso elemento HTML, definimos o html desse elemento o texto que anteriormente era mostrado utilizando o document.write
.
Assim deve funcionar normalmente.
Qualquer dúvida você pode consultar a documentação dessa função que utilizamos clicando aqui. Ou você também pode mandar aqui pra gente no fórum que iremos responder você.
Espero ter ajudado, bons estudos :D