Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use innerText, innerHTML, outerText and outerHTML". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use innerText, innerHTML, outerText and outerHTML" can help you solve your doubts.

1.innerText attribute

The innertText attribute allows you to manipulate all the text content contained in an element, no matter where the text is in the subdocument tree. When reading values through innerText, it splices all the text in the subdocument tree in order from shallow to deep. Take the following HTML code as an example:

This is aparagraph with a list following it.

Ltem l

Ltem 2

Ltem 3

For the element in this example, its innerText property returns the following string:

This is a paragraph with a list following it.

Item l

Item 2

Item 3

Because different browsers handle white space differently, the output text may or may not contain indentation from the original HTML code.

Using the innerText attribute to set the content of this element, you only need one line of code:

Div.innerText= "Hello world!

After executing this line of code, the HTML code for the page will look like this:

Hello world!

As you can see, setting the innerText property removes all pre-existing child nodes, completely changing the Dom subtree. In addition, you can encode all HTML syntax characters (smaller than signs, stem marks, quotes, and sum marks) that appear in the text by setting the innerText property. For example, the following line of code:

Div.innerText= "Hello&welcome,"reader"!

The results after running are as follows:

Hello & welcome, "reader"!

Setting innerText will always generate only one child text node of the current node, and to ensure that only one child text node is generated, the text must be HTML encoded. In addition, you can use the innerText attribute to filter out the HTML tag. The way to do this is to set innerText equal to innerText, so that all HTML tags can be removed, as shown below:

Div.innerText=div.innerText:

The result of executing this line of code is to replace everything in the container element with the original text. IE, Safari, Opera, and Chrome support the innerText attribute. Although Firefox does not support innerText, it supports the textContent attribute, which has a similar effect. TextContent is an attribute specified at the DOM3 level and is also supported by Safari, Opera, and Chrome. To ensure cross-browser compatibility, it is necessary to use functions to detect which properties can be used as follows:

Function getInnerText (element) {

Return (typeof element.textContent== "string")?

Element.textContent: element.innerText:

}

Function setInnerText (element, text) {

If (typeof element.textContent== "string") {

Element.textContent=text:

} else {

Element.innerText=text:

}

}

Both functions accept an element and then check to see if the element has a textContent attribute. If there is, then type of element.textContent should be "string"; if not, the two functions will use innerText instead, and you can call them as follows:

SetInnerText (div, "Hello worldl")

Alert (getinnerText (div)); / / "Hello world!"

Use these two functions to ensure that the correct properties are used in different browsers.

2.innerHTML attribute

InnerHTML and innerText are similar in many ways. When reading information, innerHTML returns the HTML representation of all child nodes of the current element, including elements, comments, and text nodes. When writing information, innerHTML creates a new Dom subtree at the specified value and replaces all child nodes of the current element with that subtree. The main difference between innerHTML and innerText is that innerHTML deals with HTML strings, while innerText deals with plain text strings.

Take the following HTML code as an example:

This is aparagraph with a list following it.

Ltem l

Ltem 2

Ltem 3

The innerHTML attribute of the element here returns the following string:

This is aparagraph with a list following it.

Ltem l

Ltem 2

Ltem 3

The text returned by innerHTML may vary from browser to browser. IE and Opera often convert all tags to uppercase, while Safari, Chrome, and Firefox return HTML-, including spaces and indents, in the form specified in the document. Don't expect all browsers to return innerHTML values without the slightest difference.

When writing information, innerHTML parses the given string into a Dom subtree and replaces all subnodes with this subtree. Because the string assigned to innerHTML is treated as HTML, all tags contained in it are converted to corresponding elements in the same way that browsers handle HTML (again, this process varies from browser to browser). If you set only simple text like this, the result is just like setting innerText -:

Div [XSS _ clean] = "Hello world!":

If the string set for innerHTML contains HTML code, the result may be very different. The difference is that innerText escapes HTML syntax characters, while innerHTML parses them. Take a look at the following example:

Div [XSS _ clean] = "Hello&welcome,\" reader "!"

The result after executing this line of code is:

Hello & welcome, "reader"!

As soon as you set up the innerHTML, you can access the newly generated node as you would any other node in the document.

Setting innerHTML causes the browser to parse the HTML string into the corresponding DOM tree. In other words, if you read the innerHTML after you set it up, you will get a very different string. This string is no longer original

The HTML code is the result of serialization of the DOM subtree created from the original HTML string.

InnerHTML also has some limitations. First of all, in most browsers, elements inserted through innerHTML are not executed. IE is the only browser that supports this operation, but only if the defer attribute is specified and what Microsoft calls a scope element (scoped element) is added to the front of the element. This is because an element is considered an out-of-scope element (NoScope element), which means that you can't see the element on the page, just like you can't see the element or comments. In a string inserted through innerHTML, if it starts with an out-of-scope element, IE strips off all out-of-scope elements, which means that the following line of code cannot be executed:

Div.innerHTML= "alert ('hi');"

The first line of code causes a text node to be inserted in front of the element. Afterwards, you may need to remove this text node in order not to affect the display of the page. The second line of code takes a similar approach, except that it uses an element that contains non-newline spaces.

It still doesn't work if you just insert an empty element; you have to include a little bit of content before the browser creates a text node. Similarly, you may have to remove this node in order not to affect the layout of the page. The third line of code uses a hidden field

The same effect can be achieved. However, because hidden fields do not affect the layout of the page, this approach is preferred in most cases. In most browsers, there is a similar problem with writing elements through innerHTML. Opera 9 and later and Firefox 2 and later support intuitive insertion of elements through innerHTML, such as:

Div [XSS _ clean] = "body (background-color: red;)"

IE and Safari ignore this element. In IE, it is also an out-of-scope element, so it must be preceded by an in-scope element as follows:

Div [XSS _ clean] = "_ body tbackground-color:red;)"

Div.removeChild (div.firstChild)

Safari and Chrome continue to ignore this element because it is not added to the element. If you want to successfully insert elements in all browsers, you must do something like this:

/ / for Opera.Firefox and IE

Div [XSS _ clean] = ".body {background-color:red;)''

Div.removeChild (div.f irstChild)

/ / for Safari and Chrome

Document.getElementsByTagName ("head") [O] .appendChild (div.firstChild)

After you add the newly created element to, Safari and Chrome apply the new style.

Not all elements have innerHTML attributes. Elements that do not support innerHTML are:, and.

Whenever you want to insert HTML content from the outside world with innerHTML, you should first do some harmless treatment to the FITML. IE8 provides a window.toStaticHTML () method for this, which takes a parameter, a HTML string, and returns a harmless version-- all script nodes and event handler features are removed from the source HTML. Here is an example:

Var text= "

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.