Como carregar dinamicamente um DIV dentro de outro

Escrito por kile mckenna | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como carregar dinamicamente um DIV dentro de outro
Os sites dinâmicos servem conteúdo novo em base às ações dos usuários (Photos.com/Photos.com/Getty Images)

Os sites dinâmicos da web reagem à entrada do usuário e alteram o conteúdo na página. Isso pode ser feito através de várias linguagens de scripting. Uma das mais simples e fáceis é JavaScript. Ela permite alterar o conteúdo dos elementos em HTML, tais como DIVs (Divisores de conteúdo), em base a uma ação, como por exemplo clicar ou passar o mouse por cima de um elemento. Um clique do mouse pode criar um DIV dentro de outro existente, gerando conteúdo relacionado ao botão clicado. Você conseguirá fazer isso por meio de alguns passos.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Crie um elemento div entre os tags "body" da sua página, e coloque nele o nome "old div" ("div velho"). Crie também um botão no qual os usuários possam clicar para ativar a função de JavaScript "newInnerDiv" ("novoDivInterno"). O código se verá assim:

    <body> <div id="oldDiv" > </div> <button type="button" class="button" onclick="newInnerDiv()">Add Div</button>

    </body>

  2. 2

    Crie a função "newInnerDiv" entre os tags "head" do seu documento. A função localiza o div existente através do identificador "oldDiv" ("velhoDiv"), cria um novo elemento div nele, um elemento "p" (parágrafo) no div e, por último, a palavra "Olá" para colocar dentro do elemento p. Em seguida, adiciona o div novo ao velho, coloca por nome "newDiv" ("novoDiv") e adiciona o elemento "p".

    Adicione um teste ao começo da função para verificar que o div já tenha sido criado através do clique do mouse por parte do usuário. Não há necessidade de criar mais de um div. Uma forma simples de conseguir testar é contar os divs existentes. Se este valor for 1, o código será executado.

    <script type="text/javascript"> function newInnerDiv() { var checkDiv=document.getElementsByTagName("div"); var divNumber=(checkDiv.length); if (divNumber == 1) {

    var changeContent=document.getElementById("oldDiv"); var addDiv=document.createElement("div"); var newPara=document.createElement("p"); var newText=document.createTextNode("Olá");

    changeContent.appendChild(addDiv); addDiv.setAttribute("id","newDiv"); addDiv.appendChild(newPara); newPara.appendChild(newText);} } </script>

  3. 3

    Adicione alguns estilos para ambos divs entre os tags "head" para serem fáceis de ver ao testar a função. Faça com que o "div velho" seja vermelho e o "div novo" seja menor e amarelo. Se quiser, adicione um espaço para o botão e os elementos p.

    <style type="text/css">

    oldDiv { width:200px; height:90px; border: thin solid black; padding:0 5px 5px 5px; background-color:red; position:relative; }

    newDiv { background-color:yellow; width:180px; margin: 10px; position:absolute; }

    .button { margin: 20px 0 0 0; } p { position:relative; float:left; padding:10px; } </style>

  4. 4

    Salve a página e abra-a em um navegador web. Aparecerá uma caixa vermelha e vazia. Clique no botão e o div novo será gerado, mostrado em cor amarela e com o texto "Olá". Visualize o código da página, se a opção estiver disponível no navegador, para ver o div novo e o conteúdo dele dentro do div velho.

    O código completo se verá assim:

    <html> <head> <style type="text/css">

    oldDiv { width:200px; height:90px; border: thin solid black; padding:0 5px 5px 5px; background-color:red; position:relative; }

    newDiv { background-color:yellow; width:180px; margin: 10px; position:absolute; }

    .button { margin: 20px 0 0 0; } p { position:relative; float:left; padding:10px; } </style>

    <script type="text/javascript"> function newInnerDiv() { var checkDiv=document.getElementsByTagName("div"); var divNumber=(checkDiv.length); if (divNumber == 1) {

    var changeContent=document.getElementById("oldDiv"); var addDiv=document.createElement("div"); var newPara=document.createElement("p"); var newText=document.createTextNode("Olá");

    changeContent.appendChild(addDiv); addDiv.setAttribute("id","newDiv"); addDiv.appendChild(newPara); newPara.appendChild(newText);} } </script> </head> <body> <div id="oldDiv" > </div> <button type="button" class="button" onclick="newInnerDiv()">Add Div</button>

    </body> </html>

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível