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