Issue #183 (innerHTML problem, Mobile, JS Utils, Productivity)01/19/17
At the top of the MDN article for the innerHTML property, you'll find a note that indicates what happens when you use innerHTML to grab the content of an element that contains HTML entities like > or &. This is particularly noteworthy when those entities are not escaped.
For example, let's consider the following HTML:
|
<p>> format C & celebrate</p>
|
Notice inside the paragraph there's a greater-than symbol (
>), used here to indicate a mock command prompt. There's also an ampersand character (
&). Neither of these is using its HTML entity equivalent, so they're a bit risky to use in this way. However, due to HTML parsing rules, they will still appear correctly on the page.
If I grab the content of the paragraph element using
innerHTML then insert it into another element using the
textContent property, this is what will appear on the page:
|
> format C & celebrate
|
This is probably not what I want. To get around this, I would want to avoid using
innerHTML, if possible. Instead, I can use
textContent, which would display the paragraph of text in the way I want it to appear, like this:
You can see the difference
in this JS Bin demo where I'm displaying the contents of the paragraph inside three
output elements. The first uses
innerHTML to grab the paragraph content and the second uses
textContent.
The third example uses
innerHTML to grab the paragraph content but it also uses
innerHTML instead of
textContent to display it inside the new element. This works as desired. It will depend on what you're trying to do in any particular case, but it's good to keep in mind the differences.
Of course, if there were other HTML elements inside the paragraph, then using
textContent may not be the right solution, because the HTML wouldn't be preserved. In that case, I'd probably have to grab all the nodes in the paragraph individually and only use
textContent on the text nodes.
Now on to this week's tools!
