如何用JavaScript在现有锚点标签内添加指定span标签（无需额外函数）

Got it! Let's handle this straightforward DOM manipulation task. Here's how you can add the required <span class="vantage-icon-arrow-up"></span> inside your anchor tag using vanilla JavaScript—no extra call functions or event handlers needed:

Full Solution Code #

// Target the anchor tag using its unique ID
const scrollTopAnchor = document.getElementById('scroll-to-top');

// Create the span element
const arrowIconSpan = document.createElement('span');

// Assign the required CSS class to the span
arrowIconSpan.classList.add('vantage-icon-arrow-up');

// Insert the span as a child inside the anchor tag
scrollTopAnchor.appendChild(arrowIconSpan);

Breakdown of the code: #

• document.getElementById('scroll-to-top'): Safely grabs your specific anchor tag using its unique ID, ensuring we target exactly the element you want.
• document.createElement('span'): Creates the new <span> element we need to insert.
• arrowIconSpan.classList.add('vantage-icon-arrow-up'): Applies the specified CSS class to the span so it gets the correct styling.
• scrollTopAnchor.appendChild(arrowIconSpan): Adds the span as a child element inside the anchor tag, which is exactly what you requested.

Resulting HTML after the script runs: #

<a href="#" id="scroll-to-top" class="scroll-to-top displayed showbutton" title="Back To Top">
  <span class="vantage-icon-arrow-up"></span>
</a>

Just make sure this script runs after the anchor tag has loaded in the DOM. You can place it at the very end of your <body> tag, or wrap it in a DOMContentLoaded listener if your script is loaded in the <head>:

document.addEventListener('DOMContentLoaded', () => {
  // The code from above goes here
});

This ensures the anchor element exists before we try to modify it, but even the first snippet works fine if placed at the end of the body.

内容的提问来源于stack exchange，提问作者rpalzona