SoFunction
Updated on 2025-04-03

javascript inneHTML mine

To review, IE will kill some blanks in the front of the tag, and capitalize all the tags in it, displaying dynamically added attributes. In some elements, it is still read-only. It's really chilling to see this thing invented by IE that was finally exposed to so many flaws. However, innerHTML also has a mine, which exists in the most standard Firefox. See the following code:
Copy the codeThe code is as follows:

var newTable = ('table');
(newTable);
var newTr = ('tr');
var rowContent = '<td>Situ Zhengmei </td><td><em>RestlessDream</em></td>';
= rowContent;
(newTr);
alert()
if (() == ()) {
alert("It must be as I wish!");
}else {
alert("You stepped on a mine!");
}


[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]

When we add innerHTML to the tr node, it will be parsed by firefox into:
Copy the codeThe code is as follows:
Situ Zhengmei <em>RestlessDream</em>

And it's not the original one anymore:
Copy the codeThe code is as follows:
<td>Situ Zhengmei </td><td><em>RestlessDream</em></td>

The td tag has been removed! I think it is related to the order of joining the DOM tree, so adjust it:
Copy the codeThe code is as follows:

var newTable = ('table');
(newTable);
var newTr = ('tr');
(newTr);
var rowContent = '<td>Situ Zhengmei </td><td><em>RestlessDream</em></td>';
= rowContent;


[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]

This solves the firefox situation!