Use JavaScript to Dynamically Insert an HTML Tag Between Other Tags

Question

I just can't figure this one out. I have a link:

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

I want to insert an HTML heading tag between the span tag, like this:

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

And I want this to happen when the link is hovered over. I have this javascript code which works for adding and removing style elements when the link is hovered over, but I can't figure out how to insert and HTML tag element. Here is my JavaScript code:

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

inserting html and removing on hover seems like a BAD idea. Just use CSS and change the rules you need.... — epascarello
– epascarello, Commented Dec 4, 2018 at 18:47
@mhodges insert is wrong, it would be wrap, but still a bad idea — epascarello
– epascarello, Commented Dec 4, 2018 at 18:49
Why do you need h6 only on hover? Just style that span like it's h6 — Smollet777
– Smollet777, Commented Dec 4, 2018 at 18:49

epascarello · Accepted Answer · 2018-12-04 19:24:49Z

Not sure why you would want to change the span to an h6. Just add alter the CSS of the span on hover of the link. Change whatever properties you want so it matches the styles of your h6.

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

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

If you really want to do what you are after, you want to use .wrapInner() and .unwrap(), but it is not a best practice to do that.

EDIT:

With the comment, it sounds like that when you added an h6, some other CSS you were applying started to work. Difference with an h6 and a span is block vs inline. So sounds like you need to set display: block in the css.

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>

I know, I have tried that, problem is I need the text to Super script, and no amount of CSS I tried worked for that. The 'vertical-align: super !important;' just had no effect, but by accident I noticed that adding a h6 tag had the effect I was looking for.
Well than what you need to do instead is set the the display to be a block element and not an inline one.
So all you want it the text to move to the top? Than remove the padding on top. .navbar-dark .navbar-nav .nav-link:hover { padding-top: 0; }

eag845 · Accepted Answer · 2018-12-04 19:22:05Z

This works but in a weird way and now I do not have time. It seems when the text changes, the cursor is outside and triggers the other event.

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

Very close, just need a way to make nit dynamic instead of tied to one hard coded Link ID
@epascarello - No, for my customer it has to work in IE only

Collectives™ on Stack Overflow

Use JavaScript to Dynamically Insert an HTML Tag Between Other Tags

2 Answers 2

11 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Linked

Related