JavaScript » Basic Output

Manipulating HTML Elements

To access an HTML element from JavaScript, you can use the document.getElementById(id) method. Use the id attribute to identify the HTML element, and innerHTML to refer to the element content. The code below will show the completed quote.

<!DOCTYPE html>
<html>
<body>

<h1>Harry Potter</h1>

<p>"It is our choices, Harry, that show what we truly are, <span id="demo"></span></p>

<script>
document.getElementById("demo").innerHTML = "far more than our abilities.&quot;";
</script>

</body>
</html>

Writing to The HTML Document

For testing purposes, you can write directly to the HTML document:

<!DOCTYPE html>
<html>
<body>

<h1>Ron Weasley</h1>

<p>"I solemnly swear that I am up to no good."</p>

<script>
document.write(Date()); // This prints the date after the quote above
</script>

</body>
</html>

Code Blocks

When you click on “Click me!” the two sentences will change:

<!DOCTYPE html>
<html>
<body>

<h1>Dumbledore's Army</h1>

<p id="myPar">Do you know where they meet?</p>
<div id="myDiv">I want to find out!</div>

<p>
<button type="button" onclick="myFunction()">Click me!</button>
</p>

<script>
function myFunction() {
    document.getElementById("myPar").innerHTML = "They meet in...";
    document.getElementById("myDiv").innerHTML = "The Room of Requirement.";
}
</script>

</body>
</html>