add class name based on text content contained in another div

I want to be able to add the first word from the text in a div and make it part of a class of a different div.

The first word from id"categoryname" needs to be the first word in the class added to id"category_icon". I also want to make sure it is always lower case. Thank you

Example:

<li id="categoryname">Softball Gifts</li>

$('#category_icon').addClass('***ADD-SOFTBALL-HERE***_category_icon');

If you are 100% sure about the <li>'s content (that is there will be only text inside), you can use its inner html and parse it as a simple string:

var firstWord = $("#categoryname").html().split(" ")[0].toLowerCase();

$('#category_icon').addClass(firstWord + '_category_icon');