Although Dom provides the ability to dynamically modify documents, this is not enough for developers. Ie4.0 introduces two features for all elements to facilitate document operations. These two features are innertext and innerhtml.
The innertext feature is used to modify the text between the start tag and the end tag. For example, assume that there is an empty <DIV/> element and you want to change it to <div> new text for the Div. </div>. When using DOM:
Odiv. appendchild (document. createtextnode ("new text for the Div ."));
This code is not difficult to read, but it is very lengthy. If innertext is used, do the following:
Odiv. innertext = "new text for the Div .";
With innertext, the code is simpler and easier to understand. In addition, innertext will automatically encode the lower sign, greater than sign, quotation marks, and & Symbol in HTML. All special characters are not required:
Odiv. innertext = "new text for the <DIV/> .";
The execution result of this line of code is <div> new text for the & lt; DIV/& gt;. </div>. But how can we add HTML tags to elements? This is the problem that innerhtml solves.
With the innerhtml feature, you can directly allocate HTML strings to elements without the need to use the DOM method to create elements. For example, assume that an empty <DIV/> is <div> <strong> Hello </strong> <em> world </em> </div>. To use Dom, use the following code:
VaR ostrong = Document. createelement ("strong ');
Ostrong. appendchild (document. createtextnode ("hello "));
VaR OEM = Document. createelement ("em ");
OEM. appendchild (document. createtextnode ("world "));
Odiv. appendchild (ostrong );
Odiv. appendchild (document. createtextnode (""));
Odiv. appendchild (OEM );
When innerhtml is used, the Code becomes:
Odiv. innerhtml = "<strong> Hello </strong> <em> world </em> ";
One line of code becomes one line, which is the power of innerhml!
You can also use innertext and innerhtml to obtain the element content. If the element only contains text, innertext and innerhtml return the same value. However, if both the text and other elements are included, innertext returns only the representation of the text, while innerhtml returns the HTML code of all elements and texts. The following table lists the values returned by specific codes innertext and innerhtml.
| Code |
Innertext |
Innerhtml |
| <Div> Hello World </div> |
"Hello World" |
"Hello World" |
| <Div> <B> Hello </B> world </div> |
"Hello World" |
"<B> Hello </B> world" |
| <Div> <span> </div> |
"" |
"<Span> </span>" |
Finally, assign innertext to itself to delete all HTML tags from the specified element.
Odiv. innertext = odiv. innertext;
