如何使用 JQuery 将 HTML 标签更改为另一个标签？答案

【问题标题】：How to Change HTML Tags to Another Tag with JQuery?如何使用 JQuery 将 HTML 标签更改为另一个标签？
【发布时间】：2021-01-20 09:05:04
【问题描述】：

我有一个带有<h5>Header</h5> 标签的标题，我想在悬停时将其更改为<i class="material-icons>flash_on</i>，然后在悬停时将其更改回

这是我的html代码；

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

【问题讨论】：

请贴出你写到这里的JS代码，以便我们帮你调试。顺便说一句，隐藏/显示现有元素比更改/创建标签本身要简单得多。
或者你可以做类似<h5 id="charger"><span>Şarj Aletleri</span><i class="material-icons">flash_on</i></h5>的事情，如果只是显示/隐藏的问题，你可以用CSS处理悬停
其实我现在还没有写任何 jscript 我只是一个网站设计的初学者，不知道任何 js 或 jquery
@ChandlerMurielBing 所以你还没有尝试并要求我们编写代码...这不是“免费开发者论坛”
我并不是说我从未尝试过，我尝试过 jquery、jscript 和一些 css，但都失败了，所以我删除了所有这一切，这就是我在这里寻求帮助的原因

标签： javascript html jquery materialize

【解决方案1】：

你不需要 JavaScript，你可以添加简单的 CSS 来改变元素的显示例如

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

或者如果您需要更改 HTML 内容，那么您可以使用 jQuery 进行更改，如下所示：

$(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>

【讨论】：