Javascript innerhtml method exception note

Innerhtml uses a very frequently used JavaScript method, because it can often replace complex Dom operations. Its function is to insert text characters with the htlm Mark into an HTML container, and retain the HTML Rendering effect. I have always thought that this method does not have browser software compatibility problems (in common browsers ). Debugging a section of JS todayCodeWhen I found that it was not running normally in IE, but there was no problem in the Firefox browser. I found that the problem lies in the innerhtml method through gradual troubleshooting. I used try
The {} catch (e) {} statement captures an "unknown runtime error" under ie. the error prompt is not clear. Finally, I tried to test it multiple times and found it was an HTML Nesting Problem.

First, let's take a look at the following mark writing method. The following Nesting is obviously illegal.

< P ID = "Box" >
< Li > Content text </ Li >
</ P >

The built-in "Verification" function of Dreamweaver does find this problem. The error message is as follows:

The innerhtml exception mentioned in this article occurs when you put a large tag into a small container (for example, put Div into span, when an illegal nested structure such as <span> <div> content text </div> </span> is formed, or an unspecified nested relationship occurs. The following example shows the simple code for your test. You can copy the following code as the test.html file and run it in IE and FF respectively. You will find that it will report an error in IE (I have tested the IE version as IE7 currently, I don't know if other versions have this problem ). I really feel that sometimes IE is more standard than FF, sweat.

Test code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8"   />
< Title > Javascript innerhtml method exception note </ Title >
</ Head >

< Body >
< P ID = "Box" > < Li > Content text </ Li > </ P >
< Script Type = "Text/JavaScript" >
Try
{
Document. getelementbyid ( ' Box ' ). Innerhtml = ' <Li> Insert the HTML content containing the Li tag to the P tag </LI> ' ; // "Unknown runtime error" appears in IE, FF browser is normal
// Document. getelementbyid ('box'). innerhtml = '<span> Insert the HTML content containing the span tag to the P tag </span>'; // both IE and FF are normal.
}
Catch (E)
{
Alert (E. Message );
}
</ Script >
</ Body >
</ Html >

Related content:The innerhtml method checks and fixes Dom integrity that contains HTML string tags in advance. See the following example:

< Div ID = "Box" > </ Div >
< Script Type = "Text/JavaScript" >
// The innerhtml method checks and fixes the completeness of HTML string tags.
Ocument. getelementbyid ( ' Box ' ). Innerhtml = ' <Span> insert HTML content containing the span tag but not ending to the P tag. ' ; // Note that span is not over.
Alert (document. getelementbyid ( ' Box ' ). Innerhtml ); // IE outputs "<span> insert HTML content that contains the span tag but does not end to the P tag </span>". The FF browser is the same, but the Spans on both sides are in lower case.
</ Script >