Add a specific tag element after another specific tag element with Jquery

Question

I have the below code:

HTML

<div class="menu">
  <ul>
    <li>
      <a href="#"> 1 </a>
    </li>
    <li>
      <a href="#"> 2 </a>
   </li>
   <li>
    <a href="#"> 3 </a>
   </li>
 </ul>
</div>

and i am trying to add after 1st </li> the code <li><a href="#">More</a><ul> and after the last </li> the closing </ul></li> with Jquery.

I have tried

$( '.menu > ul > li:eq(0)' ).after( '<li><a href="#">More</a><ul>' ); ->tag1
$( '.menu > ul > li:eq(2)' ).after( '</ul></li>' ); ->tag2

Fiddle here http://jsfiddle.net/B86JW/4/

The problem is that <li> and <ul> is automatically self closing and the same thing for </li></ul>

Expected output

<div class="menu">
  <ul>
    <li>
      <a href="#"> 1 </a>
    </li>
    <li><a href="#">More</a> -> tag 1
      <ul> -> tag 1
        <li>
          <a href="#"> 2 </a>
       </li>
       <li>
        <a href="#"> 3 </a>
       </li>
     </ul>
   </li> -> tag 2
 </ul> -> tag 2
</div>

Jsfiddle http://jsfiddle.net/B86JW/4/

@ArunPJohny I see, and how can i do this? I know in Vqmod from Opencart i do search and add and i was thinking is quite the same. — Adrian
– Adrian, Commented Nov 18, 2013 at 11:11
@ArunPJohny I have added the expected output above that i want to have. — Adrian
– Adrian, Commented Nov 18, 2013 at 11:15

rajesh kakawat · Accepted Answer · 2013-11-18 11:20:09Z

4

try something like this,FIDDLE

    var new_li = $('<li><a href="#">More</a><ul></ul></li>')
    new_li.find('ul').append($( '.menu > ul > li:gt(0)' ));

    $( '.menu > ul > li:eq(0)' ).after( new_li );

answered Nov 18, 2013 at 11:20

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

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

Comments

Jai · Accepted Answer · 2013-11-18 11:28:13Z

1

You can try this too:

var html = $('.menu ul li').not(':first').each(function(){
    return this.outerHTML;
});
$( '.menu > ul > li:eq(0)' ).after( '<li><a href="#">More</a><ul></ul></li>' );
$('.menu ul ul').html(html);

answered Nov 18, 2013 at 11:28

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2013-11-18 11:35:29Z

1

Try this,

var xHtml = $( '.menu > ul > li').first().nextAll().detach();
var xNewUl = $("<li><ul></ul></li>").appendTo('.menu > ul');

xNewUl.find('ul').prepend('<a href="#">More</a>').append(xHtml);

DEMO

Updated Version,

var xHtml = $( '.menu > ul > li').first().nextAll().detach();
var xNewUl = $("<li><ul></ul></li>").appendTo('.menu > ul');

xNewUl.prepend('<a href="#">More</a>');
xNewUl.find('ul').append(xHtml);

DEMO I

edited Nov 18, 2013 at 11:35

answered Nov 18, 2013 at 11:22

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Collectives™ on Stack Overflow

Add a specific tag element after another specific tag element with Jquery

3 Answers 3

Comments

Comments

DEMO

DEMO I

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related