DOM Programming Examples
Dom Example Here is an example that allows us to add and replace nodes
Upsidedown This example literally turns the page upside down by reversing every node on the page
Select box This example uses dom programming to turn a set of urls into a select box.
In this example we will use javascript to create and add a new paragraph to a displayed page using DOM methods.
Exercise - use an existing web page and the instructions below to add a paragraph to a page.
1 Create a new element and give it an id
// this creates a new paragraph element in memory
newelement=document.createElement("p")
// this sets the new elements id to newpara
newelement.setAttribute("id","newpara")
2 Create a new text node and give it some text
//creates a textnode with some text in it
newtext=document.createTextNode("The new text")
3 Now add the new text to the new element
newelement.appendChild(newtext)
4 Add the new element and its text node to the end of the document
document.body.appendChild(newelement)
5 Finally add a button to the page that runs the code that adds the paragraph.
Exercise
Add a button to a web page that inserts a new image inside a div tag using DOM programming techniques