0

Estou aprendendo a programar em JavaScript e jQuery, e estou com problema quanto na geração de código em HTML. Dado um corpo HTML como faço para inserir código HTML dentro de um lugar especifico?

No caso abaixo eu já sei inserir um paragrafo no final do <body>. Mas gostaria de saber como faço para inserir por exemplo antes dos <div> ou então dentro do <div>Teste1</div>.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $(document.body).append($('<p/>').text('Ola'));
    });
    </script>
  </head>
  <body>
    <div>Teste1</div>
    <div>Teste2</div>
    <div>Teste3</div>
    <div>Teste4</div>
  </body>
</html>

Saída:

Teste1
Teste2
Teste3
Teste4

Ola

2 Respostas 2

2

$('#um').append('<p>Segundo do Primeiro</p>');
$('body').prepend('<p>No inicio do Body</p>')
$('body').append('<p>No final do Body</p>')
#um{
background: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="um">Primeiro</div>

1

Quando os elementos não tem uma identificação (ID ou Classes), isso se torna trabalhoso, já que você terá que saber a posição do elemento na tela.

Sabendo a posição (que vai de 0 até númeroDeElementos-1), você pode utilizar o seletor nth-child ou eq.

$(document).ready(function(){
     /* Adiciona no final do Body */
     $(document.body).append($('<p/>').text('Final do Body'));
     
     /* Adiciona dentro da segunda DIV (0 até n-1) */
     $(document.body).find('div:eq(1)').append($('<p/>').text('Na segunda div'));
     
     /**
      * Antes da terceira div.
      * O before adiciona antes do elemento
      */
     $(document.body).find('div:eq(2)').before($('<p/>').text('Antes da 3 div'));
});
body > div {
  background:gray
}

body div p {
  background:orange
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Teste1</div>
<div>Teste2</div>
<div>Teste3</div>
<div>Teste4</div>

2
  • Eu nao sabia essa do id, a intenção é tornar mais simples possivel, no caso então da resposta acima eu iria colocar o id no corpo Commented 1/03/2018 às 15:58
  • 1
    @ViniciusMorais o ideal é adicionar os ID's onde você quer manipular. Isso fica mais fácil. Quando se tem um projeto grande, você pode acabar "se perdendo" com a quantidade de elementos. Por isso você pode adicionar um id="myId" ou class="myClass" Commented 1/03/2018 às 16:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .