Dynamic documents with javascript

CSIT570 (10/24/2013)

last week we went over:

  • the execution environment & the DOM
  • accessing elements in JavaScript
  • events and event handling

this week we will learn

  • more event handling
  • creating elements
  • changing element position
  • changing element styles

First things first

let's take a look at our Book constructor assignment

Creating new elements

Follow along as we create elements and style them with JavaScript.

  1. Create a new HTML file called yourname-dynamicjs.html 
  2. Fill it with boilerplate HTML code (html, head, body tags).


  <title>dynamic js 10/24/2013</title>
<script type="text/javascript">
document.onload = function(){ // our js will go here };
<body> <!-- our html will go here -->

Creating elements

var element = document.createElement(tagName);
for example, let's create a paragraph:

var paragraph = document.createElement("p");

adding our elements to the dom


let's add a paragraph to the body of our page.

  1. get the body of our page
  2. create a paragraph
  3. append the paragraph to the body

Adding our elements to the dom

//1. get body
var body = document.getElementsByTagName("body")[0];

//2. create paragraph
var newParagraph = document.createElement("p");

//3. append paragraph to body

Adding text to our new element

var text = document.createTextNode("Here is some text");
and we can append it to our paragraph:

//1. create text node
var text = document.createTextNode("Here is some text");	

//2. append text to new paragraph

Other Options

newParagraph.innerHTML = "some html";
newParagraph.innerText = "some text"; 

what is the difference between the two?

newParagraph.innerHTML = "<a href='http://cs.montclair.edu'>cs @ msu</a>";
newParagraph.innerText = "<a href='http://cs.montclair.edu'>cs @ msu</a>"; 

get/set/remove element attributes

newParagraph.setAttribute('id', 'my-new-paragraph');



We can also get and set attributes via the element's object properties




in-class assignment: creating a guestbook!

  1. HTML form with input for name and message, along with a submit button.
  2. When the user clicks the submit button, add the message and name to the guestbook.

positioning elements

our favorite!

var paragraphStyle = newParagraph.style;
var positionX = paragraphStyle.left;
var positionY = paragraphStyle.top; 

and we can set the position:

paragraphStyle.position = "absolute";
paragraphStyle.left = 300 + "px";
paragraphStyle.top = 75 + "px"; 

Mouse positioning

window.onclick = function(e){
		console.log("x: " + e.clientX + " y: " + e.clientY);	

What is happening here?

Let's update our guestbook

  1. Add an input field for x position
  2. Add an input field for y position
  3. Set the position of the guestbook item
    before you append it to the DOM!

homework for this week

Chapter 6 Exercises (on page  273):
6.1, 6.2, 6.3 (doesn't need to be an image of yourself

Read Chapter 7, Introduction to XML

Due before noon on Thursday of next week, 10/31

Dynamic Documents with JavaScript

By Jenn Schiffer

Dynamic Documents with JavaScript

  • 1,471
Loading comments...

More from Jenn Schiffer