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?

[PeejAvery]

Don't forget that the <font> tag is deprecated. If you want valid HTML, you need to be using <span> tags.

my guess is that getElementById It only looks at the hard coded html and not at the dynamically generated one

No. The browser will also return IDs appended through text. In fact, you're making this much more difficult on yourself. See the code below.

<div id="searchIn">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ultrices, massa vel dapibus lobortis, mi odio consequat eros, at ultricies enim dui nec augue. Maecenas placerat, lectus dictum venenatis ultricies, odio orci consectetur sapien, ut lobortis elit justo sed orci. Pellentesque quis urna libero. Quisque odio metus, scelerisque sed pharetra commodo, congue quis erat. Maecenas egestas molestie justo ac sollicitudin. Vestibulum mattis massa ut libero vehicula eget bibendum orci auctor. Sed at pellentesque arcu. Praesent tempus erat eu lacus vulputate feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /><br />
</div>

<script type="text/javascript">
function highlightText(searchFor, searchIn) {
  var pattern = new RegExp('(' + searchFor + ')','gi');
  searchIn.innerHTML = searchIn.innerHTML.replace(pattern, '<span id="highlight" style="background: #ffff00;">$1</span>');
}
highlightText("massa", document.getElementById("searchIn"));
alert(document.getElementById("highlight").innerHTML);
</script>

But, if you get more than 1 result, you need to set unique IDs. Having them all be highlight will be invalid HTML and never let you scroll to multiple ones.

[mrjavoman]

No. The browser will also return IDs appended through text. In fact, you're making this much more difficult on yourself. See the code below.

Thanks a lot, yes I do realize I am making things a lot more complicated using an algorithm for string matching when I could just use regular expressions, but its for a school project so it is for demonstrations purposes.

[PeejAvery]

...but its for a school project so it is for demonstrations purposes.

Then I just unknowningly violated one of our site's rules. If it's schoolwork, we never provide full functioning code. Since I cannot change that now, I would highly like to encourage you to research it so that you could write it yourself. If not, you're just cheating your own studies.

[mrjavoman]

Then I just unknowningly violated one of our site's rules. If it's schoolwork, we never provide full functioning code. Since I cannot change that now, I would highly like to encourage you to research it so that you could write it yourself. If not, you're just cheating your own studies.

oh come on,
the project in which I'm working on involves implementing the algorithm I was talking you about not how to scroll to a tag dynamically, It just so happened that I didn't know how to scroll to a dynamically created tag and that was because as you pointed, I was using a deprecated tag.

The fact is that I need it that functionality in my implementation but I couldn't make it work so I asked here as as part of my research, I believe that is valid question.

anyway Thank you again for the feedback.

[PeejAvery]

Good. Too many students come in and try to get their work done for them. I'm glad you're not one of them.

It just so happened that I didn't know how to scroll to a dynamically created tag and that was because as you pointed, I was using a deprecated tag.

Unfortunately, this could not be the cause. Using deprecated tags will not affect actual page display nor functionality. Currently, there is no browser that has moved past deprecated tags. So...even though it appears your page is fixed, it was fixed due to something else...not just changing the tag.

And, since your primary problem was scrolling, were you using the scrollTo() function for the scrolling?

[mrjavoman]

And, since your primary problem was scrolling, were you using the scrollTo() function for the scrolling?

Yes, I used the scrollTo() function and also another function for finding the position of a given tag
here is the code I used for that:

function findPos(obj) {
   var curtop = 0;
   if (obj.offsetParent) {
      do {
           curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);
   return [curtop];
   }
}

the source for this code is this website which explains in good detail how to find the position of a given tag
http://www.quirksmode.org/js/findpos.html

then I did:

var scrollToTag = document.getElementById('highlight');
window.scrollTo(0,findPos(scrollToTag) - 100);

this code didn't work with the font tag but when I change it to span everything worked, so that lead me to believe in what you said, that it is because the font tag is now deprecated.

now looking back at my code I have just changed it back to the font tags and it is still works.....
now I don't know what I was doing wrong xD.... maybe there was some syntax error in my code and I fixed without realizing it when I changed to span tags .... oh well xD

Thanks again for the feedback

[PeejAvery]

Rather than longhand...I'd suggest the shorthand code.

while (obj = obj.offsetParent) {
  curtop += obj.offsetTop;
}