Along with innerText and innerHTML,Internet Explorer 4.0 also introduced outerText and outerHTML,which do exactly the same thing as their inner counterparts except that they replace the node in question. For example, setting outerText on a <div/> removes it and replaces it with a text node.
Consider the following line of code:oDiv.outerText = “Hello world!”;
This single line of code is the same as this set of DOM manipulations:
The outerText property has the same rules as the innerText property in that it replaces all less-than, greater-than, quote, and ampersand characters with their HTML entities.Similarly, outerHTML behaves the same as innerHTML,creating all the necessary DOM nodes represented by the HTML string:oDiv.outerHTML = “<p>This is a paragraph.</p>”;
This line of code performs the following DOM modifications:
Whereas outerText and outerHTML provide developers with a lot of power,they don’t clearly indicate exactly what is happening (the code doesn’t read).Many developers shy away from using outerText and outerHTML because they can lead to bigger headaches down the road if something goes wrong.
Generally speaking,you’re safer using the DOM methods,whose meanings are much clearer. Both these properties can also be used to get the contents of an element.The outerText property always returns the same value as innerText,regardless of the element contents.On the other hand, outerHTML returns the full HTML code for the element,including the element itself.The following table lists the different values for outerText and outerHTML based on certain code.
Similar to innerText,you can use outerText in a unique way.By setting outerText equal to itself, you actually remove the element and replace it with a text node containing all the text inside the element:
When you click the button in this example,the <div/> is replaced with a text node containing This is my original text.You can tell that the <div/> no longer exists by using document.getElementById() to look for div1 again.In this example,the result of the function (null)is displayed in an alert.
Java Script Related Tutorials
|Adv Java Tutorial||Core Java Tutorial|
|Java-Springs Tutorial||Java Servlets Tutorial|
|EJB(Enterprise JavaBeans) Tutorial||JavaServer Faces (JSF) Tutorial|
|Java Swing Tutorial||Java Tutorial|
|JavaMail API Tutorial||Java 8 Tutorial|
|Java XML Tutorial||Java Bean Utils Tutorial|
|The Java Debugger (JDB) Tutorial||Java.math Package Tutorial|
Java Script Related Interview Questions
|Java Script Interview Questions||Adv Java Interview Questions|
|Core Java Interview Questions||Java-Springs Interview Questions|
|Java Servlets Interview Questions||EJB(Enterprise JavaBeans) Interview Questions|
|JavaServer Faces (JSF) Interview Questions||Java Swing Interview Questions|
|Java 8 Interview Questions||Java XML Interview Questions|
|JavaFX Interview Questions||The Java Debugger (JDB) Interview Questions|
Java Script Related Practice Tests
|Java Script Practice Tests||Adv Java Practice Tests|
|Core Java Practice Tests||Java-Springs Practice Tests|
|Java Servlets Practice Tests||EJB(Enterprise JavaBeans) Practice Tests|
|JavaServer Faces (JSF) Practice Tests||Java 8 Practice Tests|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.