jQuery innerText() vs outerText()

Key Takeaways

jQuery InnerText() and OuterText() are JavaScript properties that manipulate the text content of an HTML element. InnerText() replaces the content between the opening and closing tags of an element, while OuterText() removes an element and inserts the specified text in its place.
InnerText() and OuterText() can be used with any HTML element. However, using OuterText() on an element that contains other elements will replace those elements along with the text. These methods are supported in most modern browsers, but not in Internet Explorer 9 and earlier versions.
Alternatives to InnerText() and OuterText() in jQuery include the .text() method, which gets or sets the text content of an element and works with jQuery collections, and the .html() method, which gets or sets the HTML content of an element, including the tags.

jQuery InnerText() vs jQuery OuterText()

jQuery Innertext() and OuterText() functions are almost identical. Note that these can be referred to as jQuery functions but they are actually JavaScript properties. For arguments sake we will use jQuery! :)

The jQuery InnerText() property replaces the content between the opening and closing tags of an element with the specified text while the OuterText() property removes an element and inserts the specified text in place of it.

Things to remember:

* InnerText just replaces the content inside the tags
* Outertext replaces the content and the enclosing tags themselves

jQuery innerText() Function Examples


//simple example to change the text of a page element
document.getElementById("elementID").innerText = "I love jQuery4u Blog!";



Here's the text that will change.
Change text
Reset

Demo

jQuery outerText() Function Examples


document.getElementById("elementID").outerText = "I love jQuery4u Blog!"



Yes, I <3  jQuery .
Make Text Above Plain

    function function1(){
        document.all.par.outerText = "Yes, I &lt;3 jQuery!"
        myButton.disabled = true;
    }

Frequently Asked Questions (FAQs) about jQuery innerText and outerText

What is the difference between innerText and outerText in jQuery?

In jQuery, innerText and outerText are used to manipulate the text content of an HTML element. The main difference between them lies in how they handle the HTML tags. innerText retrieves or sets the text between the start and end tags of an HTML element, excluding the tags themselves. On the other hand, outerText retrieves or sets the text including the HTML tags. This means that if you use outerText to set the text, it will replace the entire element, including the tags, with the specified text.

How can I use innerText and outerText in jQuery?

To use innerText or outerText in jQuery, you need to select the HTML element you want to manipulate and then call the appropriate method. For example, to set the inner text of a paragraph element, you would use the following code:
$('p').innerText = 'New text';
To set the outer text, you would use:
$('p').outerText = 'New text';
Remember that setting the outer text will replace the entire element, including the tags, with the specified text.

Can I use innerText and outerText with any HTML element?

Yes, you can use innerText and outerText with any HTML element. However, keep in mind that these methods will only affect the text content of the element. If the element contains other elements or attributes, they will not be affected.

What happens if I use outerText to set the text of an element that contains other elements?

If you use outerText to set the text of an element that contains other elements, those elements will be replaced along with the text. This is because outerText replaces the entire element, including the tags, with the specified text.

Are there any alternatives to innerText and outerText in jQuery?

Yes, there are several alternatives to innerText and outerText in jQuery. For example, you can use the .text() method to get or set the text content of an element. This method works similarly to innerText, but it also works with jQuery collections, not just individual elements. Another alternative is the .html() method, which gets or sets the HTML content of an element, including the tags.

Can I use innerText and outerText in all browsers?

innerText and outerText are supported in most modern browsers, including Chrome, Firefox, Safari, and Edge. However, they are not supported in Internet Explorer 9 and earlier versions.

What is the performance impact of using innerText and outerText?

The performance impact of using innerText and outerText depends on the size of the text and the complexity of the HTML structure. In general, these methods are quite efficient, but if you are manipulating large amounts of text or complex HTML structures, you might notice a performance impact.

Can I use innerText and outerText to manipulate the text of an input element?

Yes, you can use innerText and outerText to manipulate the text of an input element. However, keep in mind that these methods will not affect the value of the input element, only the text displayed in the input field.

Can I use innerText and outerText to get or set the text of multiple elements at once?

Yes, you can use innerText and outerText to get or set the text of multiple elements at once. However, when getting the text, these methods will return the combined text of all the elements. When setting the text, they will set the same text for all the elements.

Can I use innerText and outerText in combination with other jQuery methods?

Yes, you can use innerText and outerText in combination with other jQuery methods. For example, you can use them with the .css() method to change the style of the text, or with the .animate() method to create animations.