HTML and CSS Reference
EXAMPLE 15.10 ( CONTINUED )
<input type="button" value="Add a blog"
This is the CSS style sheet for the page.
The function BlogEntry() defines a class consisting of the properties and methods
for each new blog object that is created.
structor. It will be assigned to the date property of the object.
These next two methods will set the properties for the name of the blogger and
the message the blogger typed into the form.
The showBlog() method is where we make good use of the DOM by creating ele-
ments and text nodes. Each blog message will be placed in a paragraph appended
to a div container. It will contain the blogger name and date on one line and the
blogger's message in bold text on the next lines. Every time a new blog is entered
it will be appended in a paragraph to the previous paragraph.
A new paragraph element is created and a reference to it is assigned to para .
A unique id attribute is set for each paragraph after it is created. Every time a new
paragraph is added the document.getElementsByTagName(“p”) method returns the
number of p elements in the document, causing the count to go up by one. This
count value is concatenated to the string “para” producing a new id for each new
paragraph created on line 6.
A reference to an HTML br (break line) element is created and assigned to aBR .
On the next line, a reference to an HTML b (bold) element is created.
The document.getElementById() method returns a reference to a div object identi-
fied as div1 on line 19. This is where the paragraphs will be added and the blog
Now a p element (paragraph) is appended to the div object.
Three text nodes are created with values that will be inserted into the paragraph.
The properties of the blog object, name , date , and message , contain the text values
that will be assigned to the text nodes.
The text for the paragraph is now appended as a child node.
The next line of text is appended followed by the br element and the b element.
This alert(), when uncommented, will display the text ( innerHTML ) for each
paragraph after it has been created, for example: Posted by Ellie Quigley on
3/21/2010<b><br>This is a hazy day and I'm in a hazy mood.</b>
The BlogEntry class ends here.