Creating HTML elements with Jquery

Question

Creating HTML elements with Jquery

Navigation

#1 by (1 votes)

0

Well, 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 append .

Here 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 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 this correct?

html jquery

asked by anonymous 29.04.2015 / 17:24

1 answer

Verify that information already exists in the database The animation of the menu buttons is not working correctly

score 1 · Accepted Answer

Using the text () function is overwriting the entire append that was previously done. So just append after the call to text() is retained.

To prevent this, continue using append () to put the free text you want and prevent 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')
    )
);