I have a URL
https://example.com/test/test1/test1_1/test1_2/
I am using the script below to get all the page names like breadcrumbs
var current = location.pathname.slice(1).split('/').join(' > ');
//Output: test > test1 > test1_1 > test1_2 >
Is there a way I can get along with the anchor tag? I have to set the click event. I have tried the code below
var current = location.pathname.slice(1).split('/').join(' > ');
$('#nav_menu-2').prepend('<div id="menu-breadcrumb"></div>');
var menuBreadcrumb = document.getElementById('menu-breadcrumb');
$('#nav_menu-2 li a').each(function() {
var $this = $('#nav_menu-2 li a');
var thismenuLi = $($this).parent().attr('id');
let thismenuText = $($this).text();
var shortText = jQuery.trim(thismenuText).substring(0, 15)
.split(" ").slice(0, -1).join(" ") + "...";
let mbcElement = '<a class="mbc-link-back" href="#" data-menu-item-id="' + thismenuLi + '">' + shortText + '</a>'
menuBreadcrumb.insertAdjacentHTML('beforeend', mbcElement);
});<div class="secondary">
<div id="menu-breadcrumb"></div>
<nav class="nav" id="nav_menu-2">
<ul id="menu-inner-page-menu" class="menu">
<li id="menu-item-204" class="menu-item-has-children"><a href="#">Test</a>
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item-has-children"><a href="#">Test 1</a>
<ul class="sub-menu">
<li id="menu-item-401" class="menu-item-has-children"><a href="#">Test 1.2</a>
<ul class="sub-menu">
<li><a href="#link">Test 1.2.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>