tying to scroll to a dinamically created tag in innerHtml

[mrjavoman]

so basically I am scanning some text for a match and then when i find a match I'm putting some highlight tags around that word using innerHtml, but i also want to be able to scroll the browser to that word in case it is a large web page

here's my code:

var highlightStartTag = "<font id=\"highlight\" style='color:blue; background-color:yellow;'>";
var highlightEndTag = "</font>";


for(var i = 1; i < text.length; i++){
state = match(pattern, text.substring(i,i+(pattern.length)));
   if( state == 0){
      scndText += text.substring(lastIndx,i) + highlightStartTag + text.substring(i,i+(pattern.length)) +   highlightEndTag;
      newText = scndText + text.substring(i+(pattern.length), text.length);
      document.getElementById('scnTxt').innerHTML = newText;
   }
}

on the highlight tags i am including an id but when a do something like:

document.getElementById('highlight');

I'm just not able to find anything, my guess is that getElementById It only looks at the hard coded html and not at the dynamically generated one

so is it even possible to somehow get an element that was generated dynamically?, am i using the right approach here?