Failed assign value in js with innerHTML

Question

I have a table like:

<table>
  <tr>
    <td id="test">ACT</td>
  </tr>
</table>

I want to color one character of "ACT" according to input position, so I write a js script as:

<script type="text/javascript" language="javascript">
    function changeBaseColor(idToChanged, position){
        var myElement = document.getElementById(idToChanged);
        var myString = myElement.innerHTML;
        var myNewString = "";

        for(var i=0; i<3; i++){
            var myCharacter = myString.substr(i,1);
            if(i == 0){
                 if(position == 0){
                     myNewString = "<span style='color: red'>" + myCharacter+ "</span>";
                 }else{
                     myNewString =  myCharacter;
                 }
            }else{
                if(i == position){
                    myNewString = myNewString + "<span style='color: red'>" + myCharacter + "</span>";
                }else{
                    myNewString = myNewString + myCharacter;
                }
            }
        }
        myElement.innerHTML = myNewString;
    }
</script>

Then, I try to add function as:

<script>changeBaseColor("test","0")</script>

When position is 1 or 2, it run success. However, when the value is 0, it only output:

<sp

I thought it couldn't understand value begin with "<", but when I use following for test, it run success and seemed it can recognize begin with "<":

 document.getElementById("test").innerHTML = "<span style='color: red;'>A</span><span>C</span><span>T</span>"

After google, I didn't find any suggestion, could you help me solve it?

Any suggestion would be grateful.

Best wishes!

Answer 1

I think you can simplify your method like this :

function changeBaseColor(idToChanged, position) {
    var myElement = document.getElementById(idToChanged);
    var myString = myElement.innerHTML;
    var myNewString = "";

    for(var i = 0; i < myString.length; i++) {
        if(i == position) {
             myNewString += "<span style='color: red'>" + myString[i] + "</span>";
        }
        else {
             myNewString += myString[i]; 
        }
   }
   myElement.innerHTML = myNewString;
}