InnerHTML + IE7

JavaScript
1

This problem has been discussed loads of times but I cannot find a solution to my exact problem.

In Firefox, Safari etc the following code is working:


      var re = new RegExp("\\%([^\\{\\}]*)\\%", "g");
      var resultStr = words_list[ word_key ].word.replace(re, "<span class='exercise_border'>$1</span>");
      $('read-wordbox').innerHTML = resultStr;

Basically what it does is use the RegExp() to find an occurance of %% and replace it with the <span class=‘exercise_border’></span> - The class .exercise_border simply underlines the text in the word using CSS.

To fix the IE innerhtml problem then I changed my code to the following:


      var re = new RegExp("\\%([^\\{\\}]*)\\%", "g");
      var resultStr = words_list[ word_key ].word.replace(re, "<span class='exercise_border'>$1</span>");

      var newdiv = document.createElement("div");
      newdiv.innerHTML = resultStr;
      var container = document.getElementById("read-wordbox");
      container.appendChild(newdiv);

Again it works perfect for Firefox, Chrome etc but IE is not working. Can anyone see any problem with my second piece of code.