You already know that it is possible to point to an HTML element using its ID. You can might want to find out what is in an element or change what is in an element.
InnerHTML
One possibility is to use innerHTML. For example, to change the content of the element:
function showtext(answer){
if(answer=='yes'){
window.document.getElementById('answer1').innerHTML='Yes has been clicked';
} else {
window.document.getElementById('answer2').innerHTML='No has been clicked';
}
}
<p>This is perhaps the best page I have ever seen don't you agree?</p>
<p id="answer1" onclick="showtext('yes');">Yes</p>
<p id="answer2" onclick="showtext('no');">No</p>
InnerHTML is not the official DOM ways of doing this. However, it is easy and works on most browsers. The correct way to do this would be to use firstChild or childNodes and that gets confusing (as you may learn later).
InnerText and textContent
These do the same as InnerHTML but strip out any tags in the text. Using InnerHTML this:
<p>This is perhaps the <em>best</em> page I have ever seen don't you agree?</p>
would give the text including the EM tags. InnerText or textContent would ignore the tags and just give the text they contain.
InnerText is the Microsoft way and textContent is the offical DOM way. You would need to include both in your code to be sure of it working (you will learn how very soon). This is the offical way to get the text from an element:
$text=window.document.getElementById('paragraph2').textContent;
This changes the text inside the element:
window.document.getElementById('paragraph2').textContent='Some sort of text goes here.';
OuterHTML
Like InnerHTML this is a Microsoft thing and may not be supported by some browsers.
InnerHTML allows you to get at the content of an element. OuterHTML is similar but includes the opening and closing tags themselves.
Unlike innerHTML though there are easy alternatives to outerHTML. They are covered soon. Don't ever use outerHTML as the alternatives should work on all browsers.
