Basic DOM element manipulation

gistfile1.js

//creating an element is easy peasy
var divElem = document.createElement( 'div' );

//divElem is now a div element. it's not related to the any other element or
// node, it's free-range.

//to add it to the body element, for example:
document.body.appendChild( divElem );
//splendidsimo!

//setting the properties of the element is as easy as editing any other object
divElem.id = 'chuckNorris';
//or:
divElem[ 'id' ] = 'chuckNorris';

document.getElementById( 'chuckNorris' ) === divElem;

//the only exception is class names. instead of simply saying
// divElem.class = 'greasedLightning', we have to do
divElem.className = 'greasedLightning';
//not a big hindrance, though. it's because class is a reserved word in js, so
// you can't use it in dot notation

//not comes the annoying part: cross-browser compatibility. some of you may be
// wondering in ever-so-surprised faces, "but how do we set an element's text?
// huh? huh!? HUH!? YOU CROOK, YOU PROMISED US KNOWLEDGE YOU SON OF A BI-"
// worry not, you weird purple-faced man!

//the w3c, WWW Consortium, says that the textContent property of an element
// is, well, its text property.
//so, to get the text of the head element:
document.head.textContent;
//and set it:
divElem.textContent = 'Spidermonkey';

//Chrome, firefox, opera and safari all conform to this standard
//however, Internet Explorer says "I MAEK OWN STANDARDS", doesn't conform to
// the standard, and instead offers an innerText property
document.head.innerText;
divElem.innerText = 'Spidermonkey';

//the only browser not supporting this property (at the time of writing) is FF.
//"help us, oh please help us! we are not strong enough to make this work!"
// fear not, now-green-faced citizen! here's a way to make a cross-browser
// element-text-setting function:
var text = (function () {

	//create a div element, and test whether it has a textContent property
	//if it does, set textProp to 'textContent', otherwise set it to 'innerText'
	var textProp = 'textContent' in document.createElement( 'div' ) ?
		'textContent' : 'innerText';

	return function ( elem, text ) {
		//if a text parameter is passed, set the element's text
		if ( text !== undefined ) {
			elem[ textProp ] = text;
		}

		//return the element's text
		return elem[ textProp ];
	};
}());

text( divElem ); //"Spidermonkey"
text( divElem, 'One div to rule them all'); //"One div to rule them all"

//HOWEVER! at times you may want to just add a certain piece of text to an
// element. instead of doing
text( divElem, text(divElem) + ' smurfs' );

//there's a standard, cross-browser, sexy way
//text is also a type of element, called a Text Node. creating one is nearly
// like creating any other element:
var textNode = document.createTextNode( ' smurfs' );
divElem.appendChild( textNode );

//"but what if I want to set the text node's value to something else!?"
textNode.nodeValue = ' something else';
//"amazing!" indeed it is, you weird man

//as an excercise, let's say you want to turn this:
var pokemon = [
	{
		name : 'Psyduck',
		level : 42,
		nickname : 'hickie' //it's a long, sad story
	},
	{
		name : 'Mankey',
		level : 42,
		nickname : 'The Raging Bull'
	}
];

//into this:
/*
<table>
<tbody>
	<tr>
		<td>Psyduck</td>
		<td>42</td>
		<td>hickie</td>
	</tr>
	<tr>
		<td>Mankey</td>
		<td>42</td>
		<td>The Raging Bull</td>
	</tr>
</tbody>
</table>
*/
var table = document.createElement( 'table' ),
	tbody = document.createElement( 'tbody' );

table.appendChild( tbody );
pokemon.forEach(function (poke) {
	var tr = document.createElement( 'tr' );

	for ( var detail in poke ) {
		if ( poke.hasOwnProperty(detail) ) {
			var td = document.createElement( 'td' );
			td.appendChild(
				document.createTextNode( poke[detail] )
			);
			tr.appendChild( td );
		}
	}

	tbody.appendChild( tr );
});