使用 JavaScript 在现有锚标记中添加 span 标记

Question

我想在锚点内添加此标签<span class="vantage-icon-arrow-up"></span>而不添加调用函数或事件函数

当前的 html 是：

<a href="#" id="scroll-to-top" 
class="scroll-to-top displayed showbutton" title="Back To Top"></a>`

Answer 1

如果您只是想附加它，这应该就足够了。

const target = document.getElementById('scroll-to-top');
target.innerHTML = '<span class="vantage-icon-arrow-up"></span>';

Answer 2

在jQuery中，你可以像这样使用.append()函数：

$('#scroll-to-top').append('<span class="vantage-icon-arrow-up">i put this text here to show that it works</span>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="scroll-to-top" class="scroll-to-top displayed showbutton" title="Back To Top"></a>

在这里阅读更多关于它的信息： https://api.jquery.com/append/

如果是纯JavaScript，它将是这样的：

var anchor = document.getElementById('scroll-to-top');
anchor.innerHTML = '<span class="vantage-icon-arrow-up">i put this text here to show that it works</span>';

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

在此处阅读有关 innerHTML 的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Answer 3

听起来你的朋友没有加载他的图标？

https://siteorigin.com/thread/search-and-scroll-to-top-icons-are-missing/https://siteorigin.com/thread/icons-not-visible-in-new-vantage-install/

无论如何，这是一个没有脚本的解决方案

#scroll-to-top {
text-decoration: none
}
#scroll-to-top::before {
content: "▲";
font-size: xx-large;
}
#scroll-to-top:hover {
text-decoration: underline
}

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

Answer 4

感谢您的及时和非常有用的回复。我已经使用 css 解决了这个问题，尽管我对结果不是 100% 满意。但现在的主要目标是解决这个问题。以下是我到目前为止从@mplungjan那里得到的想法：

#scroll-to-top:before {
content: "^"; }
#scroll-to-top.displayed{
font-size: 28px;
display: block;
width: 28px;
height: 28px;
color: #ffffff;
text-align: center;
font-family: auto;
font-weight: bolder !important;}

谢谢大家...