[Roman52]

Доброго времени!

Есть такой HTML код:

<div class="hero-intro__nav-text">
	<div aria-label="APPLY NOW • RESIDENTS" style="position: relative; height: 4.04204em;">
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-25.7206deg); transform-origin: center 30em;">A</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-24.2048deg); transform-origin: center 30em;">P</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-22.6891deg); transform-origin: center 30em;">P</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.309766em) rotate(-21.3192deg); transform-origin: center 30em;">L</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.365234em) rotate(-19.9856deg); transform-origin: center 30em;">Y</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-18.8905deg); transform-origin: center 30em;">&nbsp;</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-17.7043deg); transform-origin: center 30em;">N</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.439063em) rotate(-16.0241deg); transform-origin: center 30em;">O</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">W</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">&nbsp;</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.522266em) rotate(-14.1248deg); transform-origin: center 30em;">|</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-12.7194deg); transform-origin: center 30em;">&nbsp;</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-9.89556deg); transform-origin: center 30em;">R</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-8.32502deg); transform-origin: center 30em;">E</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-6.80928deg); transform-origin: center 30em;">S</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.189062em) rotate(-5.67787deg); transform-origin: center 30em;">I</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-4.49167deg); transform-origin: center 30em;">D</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(-2.92113deg); transform-origin: center 30em;">E</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.411328em) rotate(-1.35059deg); transform-origin: center 30em;">N</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.355469em) rotate(0.164386deg); transform-origin: center 30em;">T</span>
		<span style="position: absolute; bottom: auto; left: 50%; transform: translateX(-0.383594em) rotate(1.62456deg); transform-origin: center 30em;">S</span>
	</div>
</div>

Нужно обернуть слова APPLY NOW и RESIDENTS в теги <a href="#"></a> по разделителю |

У меня впринципе почти получилось, вот код:

let navLinks = document.querySelector('.hero-intro__nav-text');
let navLinksText = navLinks.children[0].innerHTML;
	
navLinksText = '<a href="#">' + navLinksText;

for (var i = 0; i < navLinksText.length; i++) {
	if (navLinksText.charAt(i) == '|') {
		navLinksText = navLinksText.substring(0, i) + '</a><a href="#">' + navLinksText.substring(i + 1, navLinksText.length);
	}
}

navLinksText = navLinksText + '</a>';

console.log(navLinksText);

но я зависаю на строке

let navLinksText = navLinks.children[0].innerHTML;

у меня метод .innerHTML вырезает все атрибуты styles у тегов <span> а мне этого не нужно, нужно чтобы они остались. В этом затык. Буду благодарен за помощь.