javascript - Change style of textnode but not child nodes -

i trying make collapsible hierarchy. in trying highlight place user expanding. tried set font-weight property bold highlight. highlight childern also.

<ul>     <li id="a">a          <ul>             <li id="a_1">1</li>             <li id="a_2">2                 <ul>                     <li id="a_2_2.1">2.1</li>                     <li id="a_2_2.2">2.2</li>                 </ul>             </li>          </ul>      </li>   </ul> 

what trying here if user selects a>2>2.2 . highlight textnode of 3 li nodes.

$('li').on('click', function (event) {      event.preventdefault();      $('ul:first',event.target).toggle("slow");      document.getelementbyid($(event.target).attr("id")).setattribute("style","font-weight:bold");      event.stoppropagation(); }); 

the problem here when running above code highlighting list not textnode.

final should like

**a**   1   **2**     2.1     **2.2** 

the child elements defaulting font-weight: inherit.

if don't want them inherit value parent element, have explicitly set value else.

alternatively, wrap text node want style in element (e.g. span) , make bold.