domingo, 31 de março de 2013

Criando elementos HTML com jQuery

Olá galera,

Outro dia precisei criar um elemento HTML dinamicamente usando jQuery. Como fazer isso?! Basta colocá-lo como objeto jQuery.

    var div = $("<div />");

    $("body").append(div);
  

Agora digamos que você quer criar o elemento já com os atributos.

    var div = $("<div />");

    div.attr({
      id: 'minha_div',
      title: 'estilo'
    });

    $("body").append(div);
  

Esse é o jeito mais tradicional. Vamos ver uma forma mais simplificada.

    var div = $("<div />", {
      id: 'minha_div',
      title: 'estilo'
    });

    $("body").append(div);
  

Mais elegante concorda?! Um dica básica porém muito útil em alguns projetos.

Um abraço e até a próxima.

7 comentários:

  1. Seu post foi muito útil pra mim!!!
    Era o q precisava pro meu projeto.

    Preciso de mais uma ajuda, um loop para retornar checkbox com seu valor e sua classe

    ResponderExcluir
    Respostas
    1. Olá amigo,

      Adotei como início que seus checkboxes estejam diretamente dentro de um form. Segue uma idéia abaixo.

      $('form').find('input[type="checkbox"]').each(function() {
      var checkbox = $(this);
      var value = checkbox.val();
      var classes = checkbox.attr('class');
      });

      Grande abraço

      Excluir
  2. nesse caso, como eu conto eles?

    ResponderExcluir
    Respostas
    1. Olá amigo,

      Você pode adicionar no "function" do método "each" um "index". Ficaria mais ou menos assim:

      $('form').find('input[type="checkbox"]').each(function( index ) {
      console.log( index );
      });

      Grande abraço

      Excluir
  3. Si muito pouco de jquery, preciso saber como conta-los e retornar em uma div, quando eu clicar num botao.

    Desde ja agradeço! abraços.

    ResponderExcluir
    Respostas
    1. Olá amigo,

      Fiz um exemplo para facilitar o entendimento e pode ser baixado aqui https://drive.google.com/file/d/0B__Rg9h09RtfMlBCczdzOXE3Wmc/view?usp=sharing

      Espero ter ajudado.

      Grande abraço

      Excluir
  4. sei que o post é antigo mas ainda foi muito util para mim parabens pela dica.

    ResponderExcluir