Home > Developer > JavaScript
I. 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> </pead> <body> <p> click the text below ..... <p> <ul> <li id = "DT" onclick = "changeText ()"> how are you? </Li> <li id = "DH" onclick = "changeHtml ()"> what is your surname? </Li> <li onclick = "back ()"> restore to original </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The innerText attribute defines the text to be output by the object. In this example, innerText sets the text in the DT object as "Hello ?" Changed to "I'm fine !" (Statement DT. innerText = "I'm fine! "). The innerHTML attribute is used to change the object DH. In addition to the innerText attribute, the innerText can also change the HTML statement in the object DH, so the text is changed to "my name is Xiao! ", In addition, the text output is changed to italic (<I> </I>) and a straight line (<u> </u>) is added to the bottom, that is, the statement DH. innerHTML = "<I> <u> my name is Xiao! </U> </I> ". OuterText and outerHTML have similar functions. You may try it yourself.
Ii. Dynamic text input and output
<! 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:; color: blue; font-size: 9pt ;}. blue {color: blue; font-size: 9pt ;}</style> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In this example, the text is first input in the text box, and then press the "output text" button. Then the webpage will automatically output the text you entered.
3: note that innerHTML has the function of Automatically Checking the syntax. It will complete the incomplete HTML code, which is amazing.For example, 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> </pead> <body> <p id =" tab "onclick =" Get () "> Please click me !!! </P> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The running effect is as follows:
<TABLE> <TBODY> <TR> </TBODY> </TABLE>
:
So please be careful when using it.
For example, an error occurs during such an operation.
Copy codeThe Code is as follows:
List. innerHTML = "<table> <tr> ";
List. innerHTML + = "<td>"
An intermediate variable must be used.
Html code
Copy codeThe Code is as follows:
Var html = "<table> <tr> ";
Html + = "<td> ";
List. innerHTML = html;
Var html = "<table> <tr> ";
Html + = "<td> ";
List. innerHTML = html;
In this way, the problem can be solved.
In addition:
InnerText is not supported by Firefox. Someone on the Internet does this.
InnerHTML is a W3C standard attribute, while innerText is only applicable to IE browsers. Therefore, use innerHTML as much as possible, instead of innerText. If you want to output content without HTML tags, you can use innerHTML to obtain the content containing HTML tags and use regular expressions to remove HTML tags. The following is a simple W3C-compliant example:
<A href = "javascript: alert (document. getElementById ('test'). innerHTML. replace (/<. ++?> /Gim, '')"> no html, compliant with W3C standards </a>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
