innerHTML Property | Internet Development Index |
Sets or retrieves the HTML between the start and end tags of the object.
Syntax
HTML N/A Scripting object.innerHTML [ = sHTML ]
Possible Values
sHTML String that specifies or receives the content between the start and end tags. The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.
Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.
Remarks
The innerHTML property is valid for both block and inline elements. By definition, elements that do not have both an opening and closing tag cannot have an innerHTML property.
The innerHTML property takes a string that specifies a valid combination of text and elements.
When the innerHTML property is set, the given string completely replaces the existing content of the object. If the string contains HTML tags, the string is parsed and formatted as it is placed into the document.
This property is accessible at run time, as of Microsoft® Internet Explorer 5. Removing elements at run time, before the closing tag is parsed, could prevent other areas of the document from rendering.
When using innerHTML to insert script, you must include the DEFER attribute in the script element.
You can change the value of the title element using the document.title property.
To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in How to Build Tables Dynamically. For example, use the rowIndex property or the rows collection to retrieve a reference to a specific table row. You can add or delete rows using the insertRow and deleteRow methods. To retrieve a reference to a specific cell, use the cellIndex property or the cells collection. You can add or delete rows using the insertCell and deleteCell methods. To change the content of a particular cell, use the innerHTML property.
To maintain compatibility with earlier versions of Internet Explorer, this property applies to the textArea object. However, the property works only with strings that do not contain tags. With a string that contains a tag, this property returns an error. It is better to use the innerText property with this object.
Examples
This example uses the innerHTML property to change the text of a paragraph when an onmouseover event occurs. The affected text and any tags within it are changed by the onmouseover and onmouseout events.
... <P onmouseover="this.innerHTML='<B>Mouse out to change back.</B>'" onmouseout="this.innerHTML='<I>Mouse over again to change.</I>'"> <I>Mouse over this text to change it.</I> </P> ...This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.This example uses the innerHTML property to insert script into the page.
<HTML> <SCRIPT> function insertScript(){ var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>"; var sScript="<SCRIPT DEFER>"; sScript = sScript + "function go2(){ alert('Hello from inserted script.') }"; sScript = sScript + "</SCRIPT" + ">"; ScriptDiv.innerHTML = sHTML + sScript; } </SCRIPT> <BODY onload="insertScript();"> <DIV ID="ScriptDiv"></DIV> </BODY> </HTML>This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Standards Information
There is no public standard that applies to this property.
Applies To
A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAMESET, hn, HTML Comment, HTML, I, INS, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, nextID, NOBR, OL, OPTION, P, PRE, Q, RT, RUBY, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR
See Also
insertAdjacentHTML, How to Build Tables Dynamically