使用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。 只需在鏈接的懸停上添加span的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和跨度的區別是塊與內聯。 因此，聽起來您需要在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> 

Answer 2

這有效，但是方式很奇怪，現在我沒有時間了。 似乎當文本更改時，光標在外部並觸發另一個事件。

  $(document).ready(function () { $("span").hover(function () { let spanEl =document.querySelector('#resourceLinkA span') let text = spanEl.innerText; let newEl = document.createElement('h1'); newEl.innerText = text; spanEl.innerText = ''; spanEl.appendChild(newEl); }, function () { let spanEl =document.querySelector('#resourceLinkA span') spanEl.innerHTML = spanEl.querySelector('h1').innerText; }); }); 

 .nav-link{ border:1px solid green; display:block } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <a class="nav-link" href="#resA" id="resourceLinkA"><span>abc</span></a>