Adding html tag thru jquery

Question

i have the following html

<li class="cat-item cat-item-3 collapsable">
<div class="someclass"></div>
<a href="http://demo.mysite.com/category/parent-category-i/" title="View all posts filed under Parent Category I">
    Parent Category I
</a>
<ul class="children">
    <li class="cat-item cat-item-6">
        <a class="" href="http://demo.mysite.com/category/parent-category-i/child-category-i/" title="View all posts filed under Child Category I">
            Child Category I
        </a>
    </li>
    <li class="parent cat-item cat-item-7 collapsable lastCollapsable">
        <div class="someclass"></div>
        <a href="http://demo.mysite.com/category/parent-category-i/child-category-ii/" title="View all posts filed under Child Category II">
            Child Category II
        </a>
        <ul class="children">
            <li class="cat-item cat-item-9 last">
                <a href="http://demo.mysite.com/category/parent-category-i/child-category-ii/grandchild-category-i/" title="View all posts filed under Grandchild Category I">
                    Grandchild Category I
                </a> 
            </li>

using the above html and jquery, how it is possible to add a

<span class="folder">

after every li.parent class and after every parents anchor tag. so finally above html will look like

<li class="cat-item cat-item-3 collapsable">
<div class="someclass"></div>
<a href="http://demo.mysite.com/category/parent-category-i/" title="View all posts filed under Parent Category I">
    Parent Category I
</a>
<ul class="children">
    <li class="cat-item cat-item-6">
        <a class="" href="http://demo.mysite.com/category/parent-category-i/child-category-i/" title="View all posts filed under Child Category I">
            Child Category I
        </a>
    </li>
    <li class="parent cat-item cat-item-7 collapsable lastCollapsable">
        <span class="folder"> // <-------------------- Want this
            <div class="someclass"></div>
            <a href="http://demo.mysite.com/category/parent-category-i/child-category-ii/" title="View all posts filed under Child Category II">
                Child Category II
            </a>
        </span> // <------------------------ Closing span of what I Want
        <ul class="children">
            <li class="cat-item cat-item-9 last">
                <a href="http://demo.mysite.com/category/parent-category-i/child-category-ii/grandchild-category-i/" title="View all posts filed under Grandchild Category I">
                    Grandchild Category I
                </a> 
            </li>

this means to append a span class to each parent class of a li and closing span in the end

James Allardice · Accepted Answer · 2011-10-18 06:55:24Z

1

You can use wrapAll to wrap the children of the element:

$(".parent").children().wrapAll("<span class='folder' />");

Here's a working example (inspect the output in Firebug/Developer tools to see the new span).

Update having looked back over code, I realised that you actually only want to wrap some of the children of .parent in the new span. If that is your final HTML structure, then you can do it by supplying a selector to children:

$(".parent").children("div, a").wrapAll("<span class='folder' />");

Here's another example.

edited Oct 18, 2011 at 6:55

answered Oct 18, 2011 at 6:44

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

1 Comment

saq Over a year ago

thank you for your support, but still could not get the desired result.my final code and result are shown in demo link mentioned below. would appreciate if you could dig a little more

fmsf · Accepted Answer · 2011-10-18 06:48:21Z

0

This should do it. The wrapper function won't work because you're trying to wrap multiple elements at once.

var x  = $('.parent.cat-item-7').contents();
$('.parent.cat-item-7').empty();
$('.parent.cat-item-7').append('<span class="folder"></span>');

$('.parent.cat-item7 .folder').append(x);

edited Oct 18, 2011 at 6:48

answered Oct 18, 2011 at 6:39

fmsf

37.2k49 gold badges154 silver badges196 bronze badges

3 Comments

James Allardice Over a year ago

This will wrap each child, instead of all the children, and it will duplicate the text: jsfiddle.net/hnwkb/1

fmsf Over a year ago

@JamesAllardice Yeah I noticed that that's why I changed it :) but still thanks for the warning

saq Over a year ago

somwhow i get unexpected result which i am not able to explain properly , can you please check here [link]demo.mysimplewp.com/demo-collapsible-categories

Chandresh M · Accepted Answer · 2011-10-18 06:49:15Z

0

Try below code for this:

$("<span class='folder' />").appendTo('.parent');

This will makes it happen.

answered Oct 18, 2011 at 6:49

Chandresh M

3,4932 gold badges26 silver badges48 bronze badges

1 Comment

James Allardice Over a year ago

This will just insert an empty span after all the children of .parent. The OP wants to wrap the children of .parent.

Collectives™ on Stack Overflow

Adding html tag thru jquery

3 Answers 3

1 Comment

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Related