why innerHTML does not return true when compared with same string value?

Question

I have two tables on my html page with exact same data but there may be few difference which need to be highlighted. I and using the below Javascript but seems innerHTML does not work as expected-

function CompareTables()
{
var table1 = document.getElementById("table1")
var table2 = document.getElementById("table2")



for(var i=1; i < table1.rows.length; i++)
{
    for(var j=1; j < table2.rows.length; j++){
        var tab1Val = table1.rows[i].cells[0].innerHTML;
        var tab2Val = table2.rows[j].cells[0].innerHTML;
        alert(tab1Val.toUpperCase()+"----"+tab2Val.toUpperCase());

        var changes =RowExists(table2,tab1Val);

        if(!changes[0])
        {
        table1.rows[i].style.backgroundColor = "red";
        instHasChange = true;
        }
}
 function RowExists(table,columnValue)
{
 var hasColumnOrChange = new Array(2);
 hasColumnOrChange[0] = false;
  for(var i=1; i < table.rows.length; i++)
 {

 if(table.rows[i].cells[0].innerHTML == columnValue) /*** why these two does not match**/
 {
   hasColumnOrChange[0] = true;
  }
 return hasColumnOrChange;
}
}

Please suggest what wrong here. (table.rows[i].cells[0].innerHTML == columnValue) never returns true even if all values same.

why dont you do a console.log of both values and see

Ibu
– Ibu

2012-07-20 17:59:38 +00:00
Commented Jul 20, 2012 at 17:59 — Ibu
– Ibu, Commented Jul 20, 2012 at 17:59

Community · Accepted Answer · 2017-05-23 12:27:53Z

most browsers have bugs with innerHTML and it is not a recommended property to use. different browsers will do different things, usually messing with whitespace, adding/removing quotes, and/or changing the order of attributes.

long story short, never rely on innerHTML.

In it's place, I would recommend using some of the DOM traversal functions, such as .firstChild and .nodeValue. Notice that these are sensitive of white space, and will have to be tweaked if you have anything else in your TD than just text.

http://jsfiddle.net/tdN5L/

if (table.rows[i].cells[0].firstChild.nodeValue === columnValue)

Another option, as pointed out by Micah's solution, is using a library such as jQuery, which will let you ignore most of these browser issues and DOM manipulation pain. I would not recommend bringing in the overhead of jQuery just for this issue, though.

innerHTML bug IE8

innerHTML removes attribute quotes in Internet Explorer

Micah Armantrout · Accepted Answer · 2012-07-20 18:01:12Z

1

Try and use Jquery's method .text

Depending on the browser(Firefox and Chrome's) innerHTML does not work

JQuery takes care of that issue for you.

answered Jul 20, 2012 at 18:01

Micah Armantrout

7,0476 gold badges42 silver badges73 bronze badges

1 Comment

sana Over a year ago

finally i implemented the code in jquery. thanks all for help & suggestion.

Collectives™ on Stack Overflow

why innerHTML does not return true when compared with same string value?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related