HTML and CSS Reference
In-Depth Information
Here's the code in more detail:
Create a
paragraph
element.
var d = document.getElementById('second');
var p = document.createElement('p');
var t = document.createTextNode(
'Paragraph in the second div');
p.appendChild(t);
d.appendChild(p);
Create a
text node.
Add the text node
to the paragraph.
Add the
paragraph to
the
<div>
.
The DOM is a huge subject, but this introduction has given you an idea
about what it does as a foundation for learning more. Check the final
section of this appendix for additional resources. It's time to complete
your understanding of JavaScript with a quick tour of events.
Events
You saw an event handler in “How JavaScript fits into
HTML
”—in that
case, an inline event handler. A
handler
is a function that's called when
an event happens (when the event
fires
). In this section, you'll see how
to deal with events in an external JavaScript file. When you're attaching
handlers from an external JavaScript file, you need to use the
DOM
.
Use the simple page you created for exploring the
DOM
in the previ-
ous section, but add a reference to an external JavaScript file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM Example</title>
<script src="events.js"></script>
</head>
<body>
<div id="first">
<h1>First div</h1>
<p>Paragraph in first div</p>
