• Choose a category
• All
• Classic-Fiction

// Appending a child

var firstDiv = document.createElement('div');

firstDiv.setId('appendedChild');

firstDiv.setStyle('color', 'black');

firstDiv.setTextValue('This div rocks!');

parentDiv.appendChild(firstDiv);

// Insert before

var secondDiv = document.createElement('div');

secondDiv.setStyle('color', 'red');

secondDiv.setTextValue('This div rocks more!');

parentDiv.insertBefore(secondDiv, firstDiv);

// Remove the first div

parentDiv.removeChild(firstDiv);

// Clone the second node

var thirdDiv = secondDiv.cloneNode();

thirdDiv.setStyle('color', 'blue');

thirdDiv.setTextValue('This is the third div to be created.');

parentDiv.appendChild(thirdDiv);

}

Assuming you have a div in your HTML with the id parentDiv when you run the script, the end result will have it contain the text:

This div rocks more!

This is the third div to be created.

(with the text in the appropriate colors), along with anything else it might have contained already.

Although appendChild(), insertBefore(), removeChild(), and cloneNode() all work the same way they do off-Facebook, you’ll run into problems with many of the other JavaScript object manipulation functions. Most of the ones you’ve come to know and love are available, but they’ve been changed to getters and setters instead of direct functions. Table 7-1 shows the mappings.

Table 7-1. JavaScript DOM manipulation function mappings

JS function

FBJS getter

FBJS setter

Description

accessKey

getAccessKey

setAccessKey

checked

getChecked

setChecked

childNodes

getChildNodes

N/A

Returns an array of childNodes.

className

getClassName

setClassName

See rest of recipe for more info.

clientHeight

getClientHeight

N/A

clientWidth

getClientWidth

N/A

cols

getCols

setCols

dir

getDir

setDir

disabled

getDisabled

setDisabled

firstChild

getFirstChild

N/A

form

n/a

N/A

No direct access to forms. Use document.getElementById('formid') instead. (You gave your form an ID, right?)

N/A

getRootElement

N/A

Equivalent to document.rootElement. Returns the top-level element of a Canvas page or Profile Box.

N/A

getAbsoluteTop

N/A

Returns the element’s absolute position relative to the top of the page. Use this instead of offsetParent.

N/A

getAbsoluteLeft

N/A

Same as getAbsoluteTop, but horizontal-wise.

href

getHref

setHref

id

getId

setId

innerHTML

N/A

setInnerFBML

Can throw an error if you try to put the FBML in as a string. Create an in your code first, and then pass the variable name instead.

innerText/ textContent

N/A

setTextValue

Only allows text: no HTML or FBML. Removes all childNodes of the element it is called on.

lastChild

getLastChild

N/A

location

N/A

setLocation

name

getName

setName

nextSibling

getNextSibling

N/A

OffsetHeight

getOffsetHeight

N/A

offsetWidth

getOffsetWidth

N/A

parentNode

getParentNode

N/A

previousSibling

getPreviousSibling

N/A

readOnly

getReadOnly

setReadOnly

rows

getRows

setRows

scrollHeight

getScrollHeight

N/A

scrollLeft

getScrollLeft

setScrollLeft

scrollTop

getScrollTop

setScrollTop

scrollWidth

getScrollWidth

N/A

selected

getSelected

setSelected

selectedIndex

getSelectedIndex

setSelectedIndex

src

getSrc

setSrc

style

N/A

setStyle

tabIndex

getTabIndex

setTabIndex

tagName

getTagName

N/A

title

getTitle

setTitle

type

getType

setType

value

getValue

setValue

Manipulating CSS Styles

Problem

I want to make things pretty programmatically.

Solution

Facebook Platform provides a very handy setStyle() method that does exactly what it sounds like it should. The very simplest form lets you set one style attribute at a time:

obj.setStyle('color', 'green');

Basically, pass in an attribute name (e.g., color) and a value (e.g., black). You can also set multiple attributes at the same time:

obj.setStyle({color: 'green', background: 'white'});

Discussion

setStyle() is one of the most