0

Segue illustracao para esclarecimento inserir a descrição da imagem aqui

Estou preso em uma lógica e meu problema é o seguinte, tenho esse código html:

<ul class="card"></ul>

<button>
Aperteme
</button>

e faço uma ação com esse Jquery:

$('button').on('click',function(){
            $('.card').append(`<li> Teste </li>`)
})

A lógica é a seguinte: Tenho um botão, sempre que clico nele ele faz um append no meu .card, porem o que eu gostaria que se o meu .card se já possuir um elemento, ao invés de ele criar uma nova linha, ele apenas agrupa com a existente. Tipo oque ocorre quando uso o comando .html porem com o .html ele subistitui e fica apenas um elemento e nao retornar todos.

No momento sempre que clico ele gera um novo append, quero q se já houver um append feito antes, ele apenas agrupe o append.

2
  • Não seria apenas mudar o append() para appendTo()? $( "<li> teste </li>").appendTo( ".card" ) Commented 4/11/2019 às 12:46
  • 1
    Como assim "agrupa"? Vc quer colocar uma li dentro de outra li?
    – Sam
    Commented 4/11/2019 às 14:03

3 Respostas 3

1

mais ou menos assim

$(document).ready(function(){
    $("button").click(function(){
        $("#card").append('<li><a href="#">Novo Item</a></li>');
    });
});
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <ul id="card">
    </ul>
    <button type="button">Add</button>
</body>
</html>      

2
  • Não amigo, isso já esta sendo feito... Manteve o mesmo resultado
    – Raul Cesar
    Commented 4/11/2019 às 13:47
  • @RaulCesar Eu li novamente sua pergunta, ficou mais claro agora, vou ajustar aqui o código e te enviar. Commented 4/11/2019 às 13:51
0

Faça assim:

$('button').on('click',function(){
            $('<li> Teste </li>').appendTo('.card')
})

-1

Utilize a função appendTo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <ul id="card"></ul>

    <button id="add">
        Add in List
    </button>
</body>
<script>
    $(document).ready(function () {
        $('#add').click(function () {
            $('<li>New Item</li>').appendTo('#card');
        });
    });
</script>

</html>

Referência: https://api.jquery.com/appendTo/

4
  • O resultado foi o mesmo que o do append amigo
    – Raul Cesar
    Commented 5/11/2019 às 15:12
  • @RaulCesar consegue montar uma ilustração de com você gostaria de exibir essa lista? não entendi exatamente o seu problema. Commented 5/11/2019 às 17:49
  • Sim vou atualizar o post e adicionar a tabela
    – Raul Cesar
    Commented 5/11/2019 às 18:25
  • 1
    Entendi, agora ficou claro, nesse caso eu utilizaria a função html e como parâmetro da função passaria um string concatenada com os elementos. Commented 8/11/2019 às 15:03

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