0

I have this html :

<div id="idtest">
<h4>click me test</h4>
</div>  
<ul id="collapse-PerfilManage" class="collapse">
     <li><a class="privateMenuLinkJS "><i class="fa  fa-lock"></i> elm1</a></li>
     <li><a class="privateMenuLinkJS inativeLinkCODE"><i class="fa  fa-lock"></i> elm2</a></li>
     <li><a class="privateMenuLinkJS "><i class="fa  fa-lock"></i> elm3</a></li>
     <li><a class="privateMenuLinkJS "><i class="fa  fa-lock"></i> elm4</a></li>
 </ul>

I want to append something inside a "li" that has a "a" element with a class "inativeLinkCODE".

To do this I have this jquery code:

$(document).on("click ", "#idtest", function() {
    $("a").each(function() {
        if ($(this).hasClass("inativeLinkCODE")) {             
            $(this).parent().append("<span>New</span>");
        }
    });    
});

The result of this code is:

<li><a>elm2</a><span>New</span></li>

I would like to have like this:

<li><span>New</span><a>elm2</a></li>

Just after the tag "li". Any idea how to do that ? I´ve tried append() and after() and not worked.

Here you have the fiddle. http://jsfiddle.net/a7ww6xyL/

These solution do not fit to my situation jQuery - add element after text jQuery: Add element after another element

Community
  • 1
  • 1
IgorAlves
  • 5,086
  • 10
  • 52
  • 83

3 Answers3

1

Have you tried prepend, this might fix your problem? http://api.jquery.com/prepend/ Just change this line:

$(this).parent().append("<span>New</span>");

to this

$(this).parent().prepend("<span>New</span>");

Link to fiddle: http://jsfiddle.net/a7ww6xyL/1/

krzysiej
  • 889
  • 9
  • 22
0

you should use prepend instead. prepend put before the parent element while append put after the parent element.

$(document).on("click ", "#idtest", function() {
    $("a").each(function() {
        if ($(this).hasClass("inativeLinkCODE")) {             
            $(this).parent().prepend("<span>New</span>");
        }
    });    
});
Jake Jeon
  • 3
  • 2
0

you just do like that.

$(document).on("click ", "#idtest", function() {
    $("a").each(function() {
        if ($(this).hasClass("inativeLinkCODE")) {             
            $(this).parent().prepend("<span>New</span>");
        }
    });    
});