css - Changing className vs Changing innerHTML -

i need toggle 2 words (i.e hello & world). have created 2 spans , using css toggling them. can create single div , change innerhtml alone. question 1 valid , efficient? below sample html, css, js code.

<div class='enablecss2'>     <span class='css1'>hello</span>     <span class='css2'>world</span> </div>  .css2 {     display:none; }  .enablecss2 .css2 {     display:block; }  .enablecss2 .css1 {     display:none; }  <script>     function toggle(el,event)       {            if(el.classname == '')               el.classname = 'enablecss2';           else               el.classname = '';       }  </script> 

both valid methods, , in terms of rendering speed of toggle doesn't matter. in terms of efficient coding (= less code same result), innerhtml method better method, because need less html , no css code that:

<div class='enablecss2'>     hello </div>  <script> // toggle function </script>