0

Estou tentando colocar um modal dentro de um .append(), mas não estou conseguindo. Como o HTML é muito grande, ele acaba quebrando linhas antes de chegar no final do bloco completo. Sendo assim, por não estar em uma única linha, o .append() não funciona.

Como eu faço para adicionar blocos extensos de HTML com jQuery?

$('body').append('<div class="modal fade" id="confirm-delete" tabindex="-1" aria- 
labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal- 
content"><div class="modal-header">Excluir Item<button type="button" class="btn-close" data- 
bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"> Tem certeza de 
que deseja excluir o item selecionado?</div><div class="modal-footer"><button type="button" 
class="btn btn-success" data-bs  dismiss="modal">Cancelar</button><a type="button" class="btn 
btn-danger text-white" id="dataConfirmOk">Excluir</a></div></div></div></div>');
0

1 Resposta 1

2

Pode utilizar 2 sinais de crase (template strings), que como descreve a documentação:

Template Strings são strings que permitem expressões embutidas. Você pode utilizar string multi-linhas e interpolação de string com elas. Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.

Com sua utilização, pode-se inserir em elementos no DOM qualquer estrutura HTML, o que será interpretado como uma string única, como pode ver no exemplo:

$('body').append(`
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
`);
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Vc tbm pode utilizar da técnica mais antiga que seria concatenar os elementos, mas, o que pode se tornar pouco produtivo e trabalhoso dependendo da quantidade de elementos para se concatenar:

$('body').append(
  '<table class="table">'+
    '<thead>'+
      '<tr>'+
        '<th scope="col">#</th>'+
        '<th scope="col">First</th>'+
        '<th scope="col">Last</th>'+
        '<th scope="col">Handle</th>'+
      '</tr>'+
    '</thead>'+
    '<tbody>'+
      '<tr>'+
        '<th>'+
          '...'+
        '</th>'+
      '</tr>'+
    '</tbody>'+
  '</table>'
);
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Assim tbm como pode utilizar o próprio jQuery para concatenar elementos HTML, embora essa maneira eu ache bem mais limitada pelo fato de não se poder aninhar elementos:

$('body').append( 
  $('<div class="bg-danger"><p class="text-white">testes</p></div>'), 
  $('<ul><li>A</li></ul>'), $('<ul><li>B</li></ul>') 
);
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Outra maneira utilizando o próprio jQuery seria com o método html(), que como pode ver no exemplo, as classes do Bootstrap não são aplicadas aos elementos:

$('body').html(`
  <div class="bg-danger"><p class="text-white">testes</p></div>
  <ul><li>A</li></ul>
  <ul><li>B</li></ul>
`);
.bg-danger {
  background-color: red;
}

.text-white {
  color: white;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

OBS: Não entendi pq dar append no body com uma estrutura de modal

2
  • 1
    Obrigada @LeAndrade! Commented 7/06/2021 às 1:41
  • 1
    Ah, sobre o body eu coloquei para atribuir o modal ao body Commented 7/06/2021 às 1:42

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