Creating HTML elements with Jquery

Asked

Viewed 105 times

0

Guys, I have the following HTML structure:

<ul id="list_Viagens">
    <li class="has-sub">
        <a href="#">
            <span class="text">Viagem: <span class="destaque">201500124</span>  Filial de Origem: <span class="destaque">001 JUNDIAI</span></span>
            <span class="holder"></span>
        </a>
        <ul class="list_Notas">
        </ul>
     </li>
</ul>

And I want to do it by Jquery using the append.

Then I develop the following Jquery code:

elementViagem.append(
    $('<li>').addClass('has-sub')
             .append(
                 $('<a>').attr('href', '#')
                         .append(
                             $('<span>').addClass('text')
                                        .text('Viagem: ')
                                        .append(
                                            $('<span>').addClass('destaque')
                                                       .attr('data-element', 'viagem')
                                                       .text(val.numvia)
                                               )
                                         .text('Filial da Viagem: ')
                                         .append(
                                             $('<span>').addClass('destaque')
                                                        .attr('data-element', 'filori')
                                                        .text(val.filori)
                                               ),
                               $('<span>').addClass('holder')
                                  ),
                 $('<ul>').addClass('list_Notas')
    )
);

But in this way it is generating the following HTML:

<ul id="list_Viagens">
    <li class="has-sub">
        <a href="#">
            <span class="text">Filial da Viagem: <span class="destaque" data-element="filori">001</span></span>
            <span class="holder"></span>
        </a>
        <ul class="list_Notas"></ul>
     </li>
</ul>

Why this part:

<a href="#">
    <span class="text">Viagem: <span class="destaque">201500124</span>  Filial de Origem: <span class="destaque">001 JUNDIAI</span></span>
    <span class="holder"></span>
</a>

Is not correct?

jquery html

1 answer

1


The use of the function text() is overwriting all the append that was performed earlier. So only the append after the call to text() is maintained.

To avoid this, continue using append() to free the text you want and prevent the content from being overwritten

elementViagem.append(
    $('<li>').addClass('has-sub')
             .append(
                 $('<a>').attr('href', '#')
                         .append(
                             $('<span>').addClass('text')
                                        .append('Viagem: ')
                                        .append(
                                            $('<span>').addClass('destaque')
                                                       .attr('data-element', 'viagem')
                                                       .text(val.numvia)
                                               )
                                         .append(' Filial da Viagem: ')
                                         .append(
                                             $('<span>').addClass('destaque')
                                                        .attr('data-element', 'filori')
                                                        .text(val.filori)
                                               ),
                               $('<span>').addClass('holder')
                                  ),
                 $('<ul>').addClass('list_Notas')
    )
);

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.