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 e.g.

.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>