innerText innerHTML usage and precautions [Recommended]_javascript skills

1: Dynamically change text and Html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo1</title> <style type="text/css"> p { color:gray; } </style> <p> </p> <p>Please click on the text below... </p> <ul> <li id="DT" onclick="changeText()"> </li>How are you?<li id="DH" onclick="changeHtml()"> </li>What is your last name?<li onclick="back()"> </li>Restore to original condition</ul>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute it

]

The innerText attribute is used to define the object The text to be output, in this example, innerText changes the text "How are you?" in the object DT into "I'm fine!" (statement DT.innerText="I'm fine!"). The innerHTML attribute is used to change the object DH. In addition to the function of innerText, it can also change the HTML statement inside the object DH, so it changes the text to "My last name is Xiao!" and the text output is changed to italics. () and add a straight line below (), that is, the statement DH.innerHTML="My last name is Xiao! u>". outerText and outerHTML also have similar functions, readers may wish to try them themselves.
2: Dynamic input and output of text

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title>Demo2<style type="text/css"> p { color:gray; } body { font-family:宋体; color:blue; font-size:9pt; } .blue { color:blue; font-size:9pt; } </style> <form id="frm"> <p> <input type="text" name="txt" size="50"> <input type="button" value="输出文本" class="blue" onclick="OutputText()"> Please enter text in the text box: </p> <p id="output"> </p> </form> Output text here:
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]
The effect of this example is to first Enter text in the text box, and then press the "Output Text" button, and then the web page will automatically output the text you entered
Three: Note that innerHTML has an automatic syntax check function, which will automatically The HTML code is completely completed, which can be said to be magical

, for example, the following script <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> Demo3 <p id="tab" onclick="Get()"> </p> Please click me!!!

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

The effect of running is like this of:
As shown in the picture:

So please Be careful when using it. For example, an error will occur when doing such an operation. Copy the code

The code is as follows:

list.innerHTML=""; list.innerHTML="

"
An intermediate variable must be used
Html code

Copy code The code is as follows:

var html="";
html ="

";
list.innerHTML=html;
var html="html ="

";
list.innerHTML=html;

This way the problem can be solved.
Also:
innerText in It is not supported under Firefox. Some people do this on the Internet
innerHTML is an attribute that complies with W3C standards, and innerText is only applicable to IE browsers. Therefore, use innerHTML as much as possible and less innerText. If To output content without HTML tags, you can use innerHTML to obtain the content containing HTML tags, and then use regular expressions to remove the HTML tags. Here is a simple example that complies with W3C standards:
No HTML, compliant with W3C standards