javascript - 使用 JavaScript 在其他标签之间动态插入 HTML 标签

Question

我就是想不通这个问题。我有一个链接:

<a class="nav-link modalNavLinks"" href="#resA" id="resourceLinkA"><span>A</span></a>

我想在 span 标签之间插入 HTML 标题标签，如下所示:

<a class="nav-link modalNavLinks"" href="#resA" id="resourceLinkA"><span><h6>A</h6></span></a>

我希望当链接悬停时发生这种情况。我有这段 javascript 代码，可以在链接悬停时添加和删除样式元素，但我不知道如何插入 HTML 标记元素。这是我的 JavaScript 代码:

 $(document).ready(function () {
    $("span").hover(function () {
        $(this).css("align-top", "text");
    }, function () {
        $(this).css("align-baseline", "text");
    });
});

Answer 1

不确定为什么要将跨度更改为 h6。只需在链接悬停时添加更改跨度的 CSS 即可。更改您想要的任何属性，使其与您的 h6 样式相匹配。

a.nav-link:hover span {
  font-weight: bold;
  font-size: 2em;
}

<a class="nav-link" href="#resA" id="resourceLinkA"><span>A</span></a>

如果你真的想做你想做的事，你想使用 .wrapInner()和 .unwrap() ，但这不是最佳实践。

编辑:

通过评论，听起来好像当您添加 h6 时，您应用的其他一些 CSS 开始工作。 h6 和 span 的区别是 block 与内联。所以听起来你需要在 css 中设置 display: block 。

a.nav-link:hover span {
  vertical-align: super
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">a<span>One</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">b<span>Two</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">c<span>Three</span></a>
  </li>
</ul>