Reorder HTML structure via jQuery

Asked

Viewed 81 times

1

I have the following structure:

<div class="chosen-container chosen-container-multi" style="width: 300px;" title="" id="Promocoes_chosen">
    <ul class="chosen-choices">

        <li class="search-field">
            <input type="text" value="Selecione" class="" autocomplete="off" style="width: 25px;">
        </li>
    </ul>
    <div class="chosen-drop">
        <ul class="chosen-results">
            <li class="" data-option-array-index="0">1 MÊS GRÁTIS</li>
            <li class="active-result" data-option-array-index="1">50% ESTUDANTES</li>
            <li class="active-result" data-option-array-index="2">2 + 1</li>
            <li class="active-result" data-option-array-index="3">SUPER PROGRESS - CURSOS A DISTÂNCIA</li>
            <li class="active-result" data-option-array-index="4">CURSOS GRATUITOS</li>
            <li class="active-result" data-option-array-index="5">SUPER PROGRESS - CURSOS E FORMULÁRIOS</li>
            <li class="active-result" data-option-array-index="6">TABELA PROGRESSIVA DE LIVROS</li>
            <li class="active-result" data-option-array-index="7">50% OFF - AMIGO PAGA MEIA</li>
            <li class="active-result" data-option-array-index="8">50% FIDELIDADE</li>
            <li class="active-result" data-option-array-index="9">CLIENT PLATINUM - Cursos Gratuitos</li>
            <li class="active-result" data-option-array-index="10">Formulário Grátis</li>
            <li class="active-result" data-option-array-index="11">CLIENT GOLD</li>
            <li class="active-result" data-option-array-index="12">AS MAIS CURTIDAS DO FACEBOOK</li>
            <li class="active-result" data-option-array-index="13">%OFF Cursos em Vídeo</li>
            <li class="active-result" data-option-array-index="14">R$0,01 vale muito!</li>
            <li class="active-result" data-option-array-index="15">Formulário Grátis</li>
            <li class="active-result" data-option-array-index="16">Compre 1 Leve 2</li>
            <li class="active-result" data-option-array-index="17">Formulário Grátis</li>
        </ul>
    </div>
</div>

What I’m trying to do is add the lines:

<li class="search-choice">
    <span>1 MÊS GRÁTIS</span>
    <a class="search-choice-close" data-option-array-index="0">
    </a>
</li>

In the following position

<div class="chosen-container chosen-container-multi" style="width: 300px;" title="" id="Promocoes_chosen">
    <ul class="chosen-choices">
      // EXATAMENTE AQUI //
        <li class="search-field">
            <input type="text" value="Selecione" class="" autocomplete="off" style="width: 25px;">
        </li>
    </ul>

I tried to do this using the method append but to no avail.

jquery html
  • 1

    Put your append sff there, it might be a mistake you have.

2 answers

5


The append inserts an item into final of the selected element, and should work as I see in your example.

Maybe your script is adding more items to this container, and you need to put them at the beginning? If so, use prepend:

var el = $('<li class="search-field"><input type="text" value="Selecione" class="" autocomplete="off" style="width: 25px;"></li>');   
$('.chosen-choices').prepend(el);

3

Friend you can use the function append jQuery. For example: 

$(".chosen-choices").append("<li class='search-choice'><span>1 MÊS GRÁTIS</span><a class='search-choice-close' data-option-array-index='0'></a></li>");

Follows a demonstration here

Browser other questions tagged jquery html

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