Reorder HTML structure via jQuery

Question

Reorder HTML structure via jQuery

Navigation

#1 by (5 votes)
#2 by (3 votes)

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 append method but without success.

html jquery

asked by anonymous 05.11.2014 / 18:06

2 answers

3

Friend you can use the append function of 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>");

Follow a demonstration here

05.11.2014 / 18:13

Tag p rendering Line Break (no use of br /) The throw statement is leaving the system inconsistent

score 5 · Accepted Answer

The append inserts an item in the end of the selected element, and should work by what I see in its example.

Maybe your script is adding more items to this container, and you need to put it in 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);