javascript - Toggling between bold and normal text with jQuery -

i'm working way through learning jquery 4th edition packtpub, trying out 1 of it's exercises on dom manipulation.

i'm trying toggle make div bold clicking it(by adding element instead of using classes or css), , remove bolding subsequent clicks.(i.e toggling between bold , normal text).

this i've come far.

html

//more html <div id="f-author">by edwin a. abbott</div> <-- div bolded //more html 

my jquery

$(document).ready(function(){     $('#f-author').click(function(){        if($(this).contents().has('b')){         $('this').find('b').contents().unwrap();       }else{         $(this).wrapinner('<b>');       }     }); }); 

nothing happening in code when click on div , i've been stuck couple of hours trying figure out going wrong.my guess problem lies if conditional.

i've tried replacing if conditional

if($(this).children().has('b'))

but nothing seems working.

i appreciate pointing out mistake.

thanks!

without classes or css requested, adds , removes <b> tag

$(document).ready(function () {     $('#f-author').on('click', function () {         if ($('b', this).length) {             $( $('b', this).get(0).childnodes[0] ).unwrap();         } else {             $(this).wrapinner('<b></b>');         }     }); }); 

fiddle