How to Change HTML Tags to Another Tag with JQuery?

Question

I have a header with <h5>Header</h5> tag and I want to change it to <i class="material-icons>flash_on</i> when I hover it and change it back on hover out

Here is my html code;

<nav class="nav-extended themed white">
    <div class="nav-wrapper">
        <!-- I WANT TO CHANGE THIS ON HOVER ==> --> <h5 id="charger">Şarj Aletleri</h5>
        <!-- TO THIS ==> <i class="material-icons">flash_on</i> -->
    </div>
    <div class="divider"></div>
    <div class="nav-content">
        <ul class="tabs themed">
           <li class="tab"><a class="active" href="#allchargers">tümü</a></li>
           <li class="tab"><a href="#syroxchargers">syrox</a></li>
           <li class="tab"><a href="#cepiumchargers">cepium</a></li>
           <li class="tab"><a href="#ttecchargers">ttec</a></li>
        </ul>
    </div>
</nav>

Answer 1

You don't need JavaScript, you can add simple CSS for change display of the elements eg

 .nav-wrapper.material-icons { display: none; }.nav-wrapper:hover #charger { display: none; }.nav-wrapper:hover.material-icons { display: block; }

 <nav class="nav-extended themed white"> <div class="nav-wrapper"> <h5 id="charger">Şarj Aletleri</h5> <i class="material-icons">flash_on</i> </div> <div class="divider"></div> <div class="nav-content"> <ul class="tabs themed"> <li class="tab"><a class="active" href="#allchargers">tümü</a></li> <li class="tab"><a href="#syroxchargers">syrox</a></li> <li class="tab"><a href="#cepiumchargers">cepium</a></li> <li class="tab"><a href="#ttecchargers">ttec</a></li> </ul> </div>

Or if you need change HTML content, so you can change with jQuery like this:

 $(function(){ $('.nav-wrapper').mouseenter(function(){ $(this).html('<i class="material-icons">flash_on</i>'); }); $('.nav-wrapper').mouseleave(function(){ $(this).html('<h5 id="charger">Şarj Aletleri</h5>'); }); });

 .nav-wrapper h5,i { display: inline-block; margin: 0; height: 30px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="nav-extended themed white"> <div class="nav-wrapper"> <h5 id="charger">Şarj Aletleri</h5> </div> <div class="divider"></div> <div class="nav-content"> <ul class="tabs themed"> <li class="tab"><a class="active" href="#allchargers">tümü</a></li> <li class="tab"><a href="#syroxchargers">syrox</a></li> <li class="tab"><a href="#cepiumchargers">cepium</a></li> <li class="tab"><a href="#ttecchargers">ttec</a></li> </ul> </div>