View database elements in the bootstrap modal

Question

Good evening, I have a modal to display information about a product, until then I can display this data with this script

$('a[data-target="#saberModal"]').on('click', function (e) {
    e.preventDefault();
    var nome = $(this).data('nome');
    var descricao = $(this).data('descricao');
    $('div.textoSaber').html(nome + descricao);
    $('#saberModal').modal('show');
    return false;
});

Only that the name is stuck to the description, I would like to know how to format this element in my html so that they are displayed correctly. I tried to change the script this way.

$('a[data-target="#saberModal"]').on('click', function (e) {
    e.preventDefault();
    var nome = $(this).data('nome');
    var descricao = $(this).data('descricao');
    $('div.textoSaber').html(nome);
    $('div.descricao').html(descricao);
    $('#saberModal').modal('show');
    return false;
});

but only the name, the description is not displayed.

Answer 1

It depends a lot on the formatting you want to do, whether you want to highlight the name and description below, or all in the same line, name and/or description in bold, etc

You can place html code normally in your javascript code. Follow examples:

Note that in example 3 is closest to your example and you can directly format in your css.

// ------ Exemplo 1 -----


   //Nomes estáticos para facilitar no código
    var nome = 'Nome para teste';
    var descricao = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra enim dui. Suspendisse vel velit erat. Donec vel dictum nisl. Vestibulum fermentum euismod sapien. '


    //Concatena o html já existente com o código da linha abaixo
    $('div.textoSaber').append('<h2>'+nome+'</h2>')
    $('div.textoSaber').append('<p>'+descricao+'</p>');


// ------ Exemplo 2 -----


    $('div.textoSaber2').html('<p>'+nome+'</p>'+'<p>'+descricao+'</p>');



// ------ Exemplo 3 -----
$('div.textoSaber3').html('<p>'+nome+'</p>');
$('div.descricao').html('<p>'+descricao+'</p>');

.descricao{ margin-top:20px;display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="textoSaber"></div>

<hr/>

<div class="textoSaber2"></div>

<hr/>

<div class="textoSaber3"></div>
<div class="descricao"></div>