JavaScript
Article

jQuery innerText() vs outerText()

By Sam Deering

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.

Demo

jQuery outerText() Function Examples

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



Yes, I <3 jQuery .

  • http://twitter.com/kopseng Carl-Erik Kopseng

    1. This is totally incorrect
    2. You are not using a single jQuery function, but simply using the DOM API.
    3. innerText and outerText are not standard properties. They are available in Webkit browsers (Safari, Chrome, etc), but not for example in Firefox.

    • http://jquery4u.com/ jQuery4u

      Hi Carl, I don’t even remember writing this post, I’ll have to update it sometime soon.
      Thanks,
      Sam

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.