.innerHTML = losing my styles

[werD420]

hello

ive got the following html

<ul class="entrydates">
<li>
<b>Submitted On:</b>2007-05-07</li>
<li><strong>Expires:</strong>2007-06-15</li>
<li><em>Last Edited:</em>2007-05-07</li>
</ul>

Im attempting to highlight part of it(along with the rest of the message), however,when i run the higlight function here and set the value via .innerHTML i lose my css styles

function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) 
{
  // the highlightStartTag and highlightEndTag parameters are optional
  if ((!highlightStartTag) || (!highlightEndTag)) {
    highlightStartTag = "<font style='background-color:#66FF66;'>";
    highlightEndTag = "</font>";
  }
  
  // find all occurences of the search term in the given text,
  // and add some "highlight" tags to them (we're not using a
  // regular expression search, because we want to filter out
  // matches that occur within HTML tags and script blocks, so
  // we have to do a little extra validation)
  var newText = "";
  var i = -1;
  var lcSearchTerm = searchTerm.toLowerCase();
  var lcBodyText = bodyText.toLowerCase();
    
  while (bodyText.length > 0) {
    i = lcBodyText.indexOf(lcSearchTerm, i+1);
    if (i < 0) {
      newText += bodyText;
      bodyText = "";
    } else {
      // skip anything inside an HTML tag
      if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
        // skip anything inside a <script> block
        if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
          newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
          bodyText = bodyText.substr(i + searchTerm.length);
          lcBodyText = bodyText.toLowerCase();
          i = -1;
        }
      }
    }
  }
  
  return newText;
}

i set the value like this although the same html is generated the styles are gone

function checkHighlight(ts)
{
var pe = document.getElementById("pnlEntries")
var eb
//alert(ts.value)
//alert(document.getElementById("pnlEntries").innerHTML)
if(ts.value!="")
 {
  eb = doHighlight(pe.innerHTML,ts.value)
  pe.innerHTML = eb
 }
}

Thanks in advance for any help

MCP, .Net Solutions Development <%_%>

 

[werD420]

the problem appears to be centralized around inline css. ie
\
css declared within the text being assigned to innerHTML
/
ive adjusted this for now, but i would like to know a way to correct this in the future

MCP, .Net Solutions Development <%_%>

 

[KDavie]

You hit the nail on the head:
Inline styles + innerHTML = headache.

Using style sheets will solve your problem. And it is a much cleaner approach too.