One: Dynamically changing text and HTML
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>Demo1</title> <style type=" Text/css "> P {color:gray; } </style> <script language= the "javascript" > Function Changetext () {//innertext attribute can only change the text content in HTML and support IE use Dt.innertext= "I'm Fine"; The function changehtml () {//innerhtml complies with the standard of the web, can be used in any browser, and can change the HTML statement dh.innerhtml= "exclusive DH" <i><u>< strong> my surname Xiao </strong></u></i> "; Firefox only supports the following notation, and does not support the use of object names directly in JavaScript scripts to manipulate object//document.getelementbyid ("DH"). Innerhtml= "<i><u>< strong> my surname Xiao </strong></u></i> "; function back () {dt.innertext= "How are you?"; Dh.innerhtml= "What's your last name?";} </script> </pead> <body> <p> Please click on the text below ... <p> <ul> <li iD= "DT" onclick= "Changetext ()" > How are you??</li> <li id= "DH" onclick= "changehtml ()" > What's your last name?</li> <li Onclick= "Back ()" > Restore as-is </li> </ul> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The InnerText property is used to define the text to be output by the object, and in this case innertext the text in the object dt "Hello?" Became "I'm fine!" (Statement dt.innertext= "I'm fine!") ）。 And the change of the object DH uses the innerHTML attribute, besides having the function of innertext, it can also change the HTML statement inside the object DH, so it turns the text into "My surname Shaw!", and the text output is changed to italic (<i></i> and add a straight line (<u></u>), that is, the statement dh.innerhtml= "<i><u> my surname Xiao!</u></i>." Outertext and outerHTML also have a similar role, readers may wish to try their own.
Two: The dynamic input and output of text
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>Demo2</title> <style type=" Text/css "> P {color:gray; Body {font-family: XXFarEastFont-Arial; Color:blue; font-size:9pt; } blue {color:blue; font-size:9pt; } </style> <script language= "JavaScript" > Function Outputtext () {var Txt=document.getelementbyid ("txt"). V Alue; if (txt!= "") {output.innerhtml= "in this output text:<u>" +txt+ "</u>"}else{output.innerhtml= "in this output text:"; } </script> </pead> <body> <form id= "frm" > <p> Enter text in textbox: <input type= "text" n Ame= "txt" size= "/> <input type=" button "value=" Output text "class=" Blue "onclick=" outputtext () "/> </p> < P id= "Output" > This output text: </p> </form> </body>;/html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The effect of this example is to enter the text in the text box first, and then press the "Output text" button, and then the page will automatically output the text you entered
Three: Note that innerHTML has the ability to automatically check the syntax, it will complete the incomplete HTML code, which can be said to be magical, such as the following script
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>Demo3</title> <script language=" javascript > function get () {var tab=doc Ument.getelementbyid ("tab") tab.innerhtml= "<table><tr>"; alert (tab.innerhtml); } </script> </pead> <body> <p id= "tab" onclick= "Get ()" > Please order me!!! </p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The effect of the operation is this:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
As shown in figure:
So please be careful when you use it.
For example, an error occurs when you do such an operation.
Copy Code code as follows:
List.innerhtml= "<table><tr>";
list.innerhtml+= "<td>"
You must use an intermediate variable
HTML code
Copy Code code as follows:
var html= "<table><tr>";
html+= "<td>";
list.innerhtml=html;
var html= "<table><tr>";
html+= "<td>";
list.innerhtml=html;
So the problem can be solved.
Other than that:
InnerText is not supported in Firefox, there is such a person on the internet to do so
InnerHTML is an attribute that conforms to the standard of the web, and innertext only applies to IE, so use InnerHTML as much as possible, and less innertext, if you want to output content that does not contain HTML tags, You can use innerHTML to get content that contains HTML tags, and then use regular expressions to remove HTML tags, and here is a simple example that meets the requirements of the international Standards of the Consortium:
<a href= "Javascript:alert (document.getElementById (' Test '). Innerhtml.replace (/<.+?>/gim, ')" > No HTML, Conforming to the </a> of the International Consortium
