Entrar Ainda não tem acesso?
4
respostas

inserir JavaScript dentro de uma DIV

Referente ao curso JavaScript: programando na linguagem da web

por daniel2mf
| 59k xp | 51 posts

Tudo bem, precisava de uma ajuda, na verdade o código é um teste só, por isso o código é um exemplo simples e não está bem organizado, mas eu criei em JavaScript uma DIV e adicionei uma botão e um texto nela pelo JavaScript, mas eu queria adicionar dentro desta DIV o resultado de um document.write, então minha dúvida é se seria possível adicionar e como faço , caso não seja possível qual a melhor forma de fazer. O objetivo é fazer um exercício de tabuada onde é informado qual a tabuada, na hora que clica no botão ele apaga essa tela e entra em uma nova com o resultado da tabuada 10 x 0 = 0 e assim por diante, porem o resultado está no document.write que quero colocar dentro dessa DIV que foi criada. Não sei se consegui explicar, mas qualquer dúvida só me mandar, muito obrigado.

var element = document.createElement("div");

        element.style.height = "500px";
        element.style.width = "500px";
        element.style.backgroundColor = "red";

        element.style.position = "absolute";
        element.style.left = "200px";


        element.innerHTML = "<h1>Hello World</h1>";

        document.body.appendChild(element);

        var botao = document.createElement("button");
        botao.textContent = "novo botao";

        element.appendChild(botao);
4 respostas
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Daniel! Como vai?

Pra inserir algum conteúdo na sua div vc pode usar o innerHTML da maneira que vc já fez caso queira utilizar algum conteúdo HTML no conteúdo. Ou então pode utilizar o textContent se for apenas um texto puro sem marcação HTML.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

por daniel2mf
| 59k xp | 51 posts

tudo bem Gabriel, então a duvida é como colocar dentro desta DIV o conteúdo de um document.write que contem uma variável.

exemplo: document.write(variável);

como consigo fazer esse document.write ficar dentro desta DIV.

Obrigado

por Geovani Granieri
| 909.2k xp | 1038 posts
Instrutor

Olá Daniel, tudo bem com você?

Peço perdão pela demora, acredito que entendi o que você gostaria de fazer:

Na verdade não devemos utilizar o document.write()e sim uma outra função chamada insertAdjacentHTMLou insertAdjaecentText, vou te explicar como ela funciona:

elementoHTML.insertAdjacentHTML( posição, texto)

Onde eu chamei de posição temos 4 valores:

  • 'beforebegin': Antes do elementoHTML
  • 'afterbegin': O primeiro filho do nosso elementoHTML
  • 'beforeend' O último filho do nosso elemento HTML
  • 'afterend': Após o elementoHTML

Então no seu caso como queremos escrever dentro da div, podemos utilizar o beforeende ir adicionando sempre por último:

Então o que você pode fazer:

>>> em nosso html
    <input type="text" id="tabuada"/>

>>> em nosso script
        var input = document.getElementById("tabuada");

Então adicionei um campo para o usuário digitar o valor que será a tabela e estou pegando o input em nosso script

Agora no seu código o que eu vou fazer é colocar um escutador de evento no botão para quando clicar executar uma função que escreva a tabuada:

botao.addEventListener("click", tabuada)

E agora só precisamos criar a nossa função de tabuada:

function tabuada() {
    var valorDoInput = input.value;
    element.insertAdjacentText('beforeend', valorDoInput * 1);
    element.insertAdjacentHTML('beforeend', "<br>")
}

Agora eu estou utilizando as nossas novas funções :) Veja que eu utilizo a nossa div que é o element e peço para inserir um texto que sera a tabuada após o final, e depois inserir um elemento html br para pular uma linha!

Agora para se tornar realmente uma tabuada só precisamos adicionar um loop :)

Abraços e Bons Estudos!

por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

tudo bem Gabriel, então a duvida é como colocar dentro desta DIV o conteúdo de um document.write que contem uma variável.

exemplo: document.write(variável);

como consigo fazer esse document.write ficar dentro desta DIV.

Obrigado

Opa, Daniel! Pelo que entendi o que vc quer é escrever o valor da variável dentro da div, correto? Se for isso mesmo, basta fazer como eu sugeri a vc no primeiro comentário. Segue um exemplo:

const variavel = 2;

const div = document.createElement("div");
div.innerHTML = variavel;

Feito isso, basta inserir a div no elemento que vc desejar.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!