javascript - 如何在 anchor 中的文本后面添加跨度？

Question

我想将 class=caret 添加到 CMS 中的引导模板到所有带有 class="has-submenu"的 anchor ，如

< a href="#" class="has-submenu" 
             id="sm-15840459350560935-1" 
             aria-haspopup="true" 
             aria-controls="sm-15840459350560935-2" 
             aria-expanded="false">Dropdown < span class="caret">< /span>< /a>

我尝试了几种解决方案，例如

$( "a.has-submenu" ).append(document.createTextNode("."))
                    .html( "<span class='caret'></span>" );

这不起作用。 < b> class="caret" < /b>可能也足够了，代码可以是 javascript 或 php。

Answer 1

在 jQuery 选择器上使用 .each()，然后附加您的 span:

$('a.has-submenu').each(function() {
  $(this).append('<span class="caret"></span>')
});

a {
  display: block;
  padding: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="has-submenu" id="a1">Text</a>
<a href="#" class="has-submenu" id="a2">Text</a>
<a href="#" class="has-submenu" id="a3">Text</a>