Scripting For The 6.0 Browsers
Revised January 27, 2002 | Printer-friendly version
Last Lesson | Next Lesson | Top
Part 3: Big Daddy Document
Let's look back at the Big Parent Node of Everything -- the document. We already know the document has methods to retrieve any element for our pleasure. What else does it do? Plenty, it turns out.
The document can create new nodes on the fly, destroy them, move them around the page, and otherwise wreak havoc. It's wicked fun. And it does so without using document.write() or object constructors (don't fret, those methods are still there). Let's take a look at the DOM scripting methods that allow this to happen.
createElement()
createElement() allows you to create a new tag. Yes! You can create whole HTML structures out of thin air! Amaze and impress your friends! Let's do one right now!
myImg = document.createElement("IMG")
Ta-da! Easy as pie! We've just created a new <IMG> tag! We can do this to create any valid tag we want.
But wait. Where is the image we just created? It's not in the document yet. Why? Because for any newly created element to be displayed, you must tell the document where to append it within the document "tree".
This is something important you must understand when using createElement(). You are not inserting HTML as you would with document.write(). Instead, you are creating a new raw element, waiting to be defined and then inserted as a child of the document node. It's floating out there in limbo, waiting to be given shape and form. In the above example, our newly born <IMG> tag has no ID, no SRC and no home in the document yet. So let's give it some definition:
myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")
Now all we need to do is append it to the document body. And to do that, we use the DOM node method appendChild():
docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)
Notice how we retrieved the <BODY> tag of the document and used it instead of appending directly to the document. The reason for this is the <BODY> is the node within the document where everything is displayed.
appendChild() is a method of all nodes, not just the document. In this next example, we'll build a 3 by 3 table from the inside out, first creating the body, row and cell elements and then appending them to a main table element. Finally, we append the whole table to the document body.
docBody = document.getElementsByTagName("body").item(0)
myTable = document.createElement("TABLE")
myTable.id = "TableOne"
myTableBody = document.createElement("TBODY")
for (i = 0; i < 3; i++){
row = document.createElement("TR")
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
row.appendChild(cell)
}
myTableBody.appendChild(row)
}
myTable.appendChild(myTableBody)
docBody.appendChild(myTable)
You can see why it makes sense to construct your complex HTML starting with the nodes first and assembling them into larger structures.
createTextNode()
Hmm. Our table is kind of, well, empty. Let's add some text content with the DOM method createTextNode(). createTextNode() simply makes a generic node that is nothing but a string of text. You can then append this to other nodes to provide dynamic content. let's add some code to our table-cell-making loop:
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
textVal = "Cell" + i + "_" + j
textNode = document.createTextNode(textVal)
cell.appendChild(textNode)
row.appendChild(cell)
}
Now our cells have some text. What about attributes like BGCOLOR and VALIGN? We can assign those with the DOM element method setAttribute():
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
cell.setAttribute("WIDTH","50")
cell.setAttribute("HEIGHT","50")
textVal = "Cell" + i + "_" + j
textNode = document.createTextNode(textVal)
cell.appendChild(textNode)
row.appendChild(cell)
}
Let's finish up. Here's the complete code for our table-builing function:
function buildTable(){
docBody = document.getElementsByTagName("body").item(0)
myTable = document.createElement("TABLE")
myTable.id ="TableOne"
myTable.border = 1
myTableBody = document.createElement("TBODY")
for (i = 0; i < 3; i++){
row = document.createElement("TR")
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
cell.setAttribute("WIDTH","50")
cell.setAttribute("HEIGHT","50")
textVal = "Cell" + i + "_" + j
textNode = document.createTextNode(textVal)
cell.appendChild(textNode)
row.appendChild(cell)
}
myTableBody.appendChild(row)
}
myTable.appendChild(myTableBody)
docBody.appendChild(myTable)
}
window.onload = buildTable
We call the buildTable() function from the window.onload handler, because we have to make sure the <BODY> element exists before we append the table to it. Try copying the code and paste it between <SCRIPT> tags in the head of a blank HTML document and open it in IE 5.0 or Netscape 6 to see the full effect.