jquery insert html between elements multiple times

Question

I have multiple divs in my htmlthat needs to have an element added between the div and p

<div class="ui-state-error ui-corner-all">
 <p><b>Reversed</b></p>
</div>

what i want is the html to add the a span between the two

<div class="ui-state-error ui-corner-all">
<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
 <p><b>Reversed</b></p>
</div>

But the functions ive tried have not been able to do this for each class once, if there are 13 classes, the function puts 13 s on each of the 13 classes, regardless if i just use a selector or an each(), insertBefore(), before(), after(), ect

here is what ive tried that hasnt worked

 <script type="text/javascript">        
       $(function () {                 
html = '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>';

           $('.ui-state-error').each(function(i){
                $('.ui-state-error').eq(i).before('p').append(html);
            });
        });
    </script>

PoulsQ · Accepted Answer · 2012-07-27 15:01:47Z

3

Try to do this :

$(document).ready(function(){
    html = '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>';
    $('.ui-state-error').prepend(html);
});

Here is the documentation about prepend

answered Jul 27, 2012 at 15:01

PoulsQ

2,0181 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jay Rizzi Over a year ago

it still adds the element multiple times per class, and erases the existing <p> , i havent been able to figure out how to iterate through each class and add an element between elements

PoulsQ Over a year ago

It should, i've just tried this. Be sure the code is not executed many times !

Jay Rizzi Over a year ago

the code is being executed multiple times , wasnt the append or prepend executing multiple, the code was. thank you

Adil · Accepted Answer · 2012-07-27 15:07:57Z

1

Try this,

Live Demo

     $(function () {                 
html = '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;">your span</span>';

           $('.ui-state-error').each(function(i){
                $(this).prepend(html);           
            });

        });

edited Jul 27, 2012 at 15:07

answered Jul 27, 2012 at 15:01

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

Gavin · Accepted Answer · 2012-07-27 15:23:14Z

1

This may work for you:

$(function(){ html = '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>'; $(html).prependTo('.ui-state-error'); });

My answer is similar with PoulsQ's. But the different is $.prepend() is for only one matched element (I think that is the first matched element), while $.prependTo() is prepending to all matched elements. This rule is also worked for append() and appendTo(); before() and insertBefore(); after() and insertAfter();

Hope this can be helpful.

answered Jul 27, 2012 at 15:23

Gavin

334 bronze badges

Collectives™ on Stack Overflow

jquery insert html between elements multiple times

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related