I have tried innerHTML and it works the same as the first method. For the first method I initially parse the whole text node that's handling the selection into three parts, the substring BEFORE the selected string, the substring AFTER the selected substring and the selected subtring. Then I created a text node contianing the BEFORE substring, a text node containing the AFTER substring and a text node containing the "<span>" + the selected substring.
Then I removed the entire text node containing the selected substring and append the newly created text nodes back on. It worked but not in a very stable way. Also, no other highlighting could be done on texts appearing after the highlighted string! I did the same using innerHTML and the result is the same.