I am only accepting raw js answers, jquery will be downvoted.
I have the following string, lets call this MyHtmlAbove:
<span class="fc-title-wrap"><span class="fc-title fc-sticky">Some Sample Content here</span></span>
I know I can do:
el = document.createElement('div');
el.innerHTML = myHtmlAbove;
What I don't know how to do now is:
Find the class fc-title and before the content (prepend) and icon tag: <i class='font-awesome-here'></i>
I am unsure if I can just use the regular raw:
el.findByClassName('fc-title').prepend('<i class='font-awesome-here'></i> ')
// Result should be:
<span class="fc-title-wrap"><span class="fc-title fc-sticky"><i class='font-awesome-here'></i> Some Sample Content here</span></span>
Can some one point me in the right direction, I feel I am close.
Since I have create a temp element to do this manipulation with, I would also like to clean it up so it's not hanging out in the dom some where it shouldn't be.
Thoughts?
document.getElementsByClassName('fc-title')[0].prepend('<i class="font-awesome-here"></i> ')
// Result should be:
// <span class="fc-title-wrap"><span class="fc-title fc-sticky"><i class='font-awesome-her<span class="fc-title-wrap"><span class="fc-title fc-sticky">Some Sample Content here</span></span>
document.getElementsByClassName('fc-title')[0].prepend('<i class="font-awesome-here"></i> ')
Raw Js() version:
const fcT = document.querySelector(".fc-title");
const t = fcT.innerText
const icon = "<i class='font-awesome-here'></i>"
fcT.innerHTML = icon + " " + t;
console.log(document.querySelector(".fc-title"));<span class="fc-title-wrap"><span class="fc-title fc-sticky">Some Sample Content here</span></span>