Adding a div element after and before by jQuery

Question

I want to ask a stupid question about jQuery. If I have:

<ul>
  <li class="ft">
   <ul class="sub"><li></li></ul>
  </li>
</ul>

I want if become:

<ul>
  <li class="ft">
   <div class="hello"><ul class="sub"><li></li></ul></div>
  </li>
</ul>

How can I add div class="hello" by jQuery?

Thanks!

Fabrizio Calderan · Accepted Answer · 2013-07-05 10:24:41Z

5

Use wrap()

$('.sub').wrap('<div class="hello" />');

Reference: http://api.jquery.com/wrap/

as a sidenote: use $('.sub') instead of $('ul.sub') since is more efficient. See http://jsperf.com/jquery-class-vs-element-class

enter image description here

edited Jul 5, 2013 at 10:24

answered Jul 5, 2013 at 10:16

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

5 Comments

Undefined Over a year ago

Youll get a slight performance increase by changing your selector to $('ul.sub')

Fabrizio Calderan Over a year ago

@Sam have you done some tests about it? my test say that .sub is faster than ul.sub

Undefined Over a year ago

@FabrizioCalderan Yes, on the JavaScript application I work on we get a performance benefit of a few milliseconds. It is a bit of a micro-optimisation but over large front end apps it can make a noticeable difference in performance.

A. Wolff Over a year ago

@FabrizioCalderan your jsperf is wrong as you are not cleaning element after wrap it, so second loop will rewrap already wrapped elements making it slower each time a little more

A. Wolff Over a year ago

More accurate jsperf here, you'll see performance are quite the same: jsperf.com/jquery-class-vs-element-class/2

user527892 · Accepted Answer · 2013-07-05 10:15:55Z

2

$('.sub').wrap('<div class="hello" />');

answered Jul 5, 2013 at 10:15

user527892

Comments

yeyene · Accepted Answer · 2013-07-05 10:16:10Z

2

$('ul.sub').wrap('<div class="hello">');

answered Jul 5, 2013 at 10:16

yeyene

7,4001 gold badge24 silver badges29 bronze badges

Comments

Goutam Pal · Accepted Answer · 2013-07-05 10:19:36Z

0

$('li.ft').html('<div class="hello">'+$('li.ft').html()+'</div>');

answered Jul 5, 2013 at 10:19

Goutam Pal

1,7531 gold badge10 silver badges14 bronze badges

1 Comment

A. Wolff Over a year ago

Using that, you'll lose associated data as handlers if any

Roy M J · Accepted Answer · 2013-07-05 10:25:52Z

0

Use prepend

$('.ft').prepend('<div class="hello"><ul class="sub"><li></li></ul></div>');

answered Jul 5, 2013 at 10:25

Roy M J

6,9367 gold badges54 silver badges79 bronze badges

Comments

oliverdejohnson · Accepted Answer · 2013-07-05 10:26:33Z

-1

There are many ways you can achieve this in jquery. Some of them involves you using DOM traversal to reach the element just before you want to add the and use jquery to add it...jquery has extensive support for this kind of parent,child, sibbling etc traversal...

But the simplest way is to manually add the element in your html markup and the use jquery to add the class attribute programmatically...

so in your jquery you can simply dosomething like:

jquery("#someid").addclass("hello");

Hope this helps...:)

answered Jul 5, 2013 at 10:26

oliverdejohnson

1,6202 gold badges16 silver badges23 bronze badges

Comments

Dhaval Marthak · Accepted Answer · 2013-07-05 10:14:38Z

-3

$('li.ft').find('div').addClass('hello');

answered Jul 5, 2013 at 10:14

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

1 Comment

putvande Over a year ago

Not what the question was. The div had to be created.

Collectives™ on Stack Overflow

Adding a div element after and before by jQuery

7 Answers 7

5 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related