I need the innerHTML of each <a> tag to change, so that if it says <a>facebook</a>, it should be changed to
<a><i class='fab fa-facebook'></i></a><main class="non">
<div class="author-desc">
<a href="#">facebook</a>, <a href="#">twitter</a>, <a href="#">github</a>
</div>
</main>
I have written JavaScript code using querySelectorAll to target all elements, but I am unsure how to proceed after the forEach loop.
<script>
let sosmed = document.querySelector(".author-desc");
let sosmeds = sosmed.querySelectorAll("a");
sosmeds.forEach(function (element) {
if (element.innerHTML === "facebook") {
element.innerHTML = "<i class='fab fa-facebook'></i>";
}
});
</script>
I would appreciate a detailed explanation on what steps I should take next.
I seem to be stuck with this piece of code as the innerHTML of the <a> tags is not changing.
sosmeds.forEach(function (element) {
if (element.innerHTML === "facebook") {
element.innerHTML = "<i class='fab fa-facebook'></i>";
}