-
-
Save Zirak/1490195 to your computer and use it in GitHub Desktop.
//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 ); | |
}); |
td.appendChild(document.createTextNode( poke[detail] ));
DOING IT WRONG
We both know you want td.textContent = poke[detail];
- Yes, I know. I condoned that method.
- meh, both are legit. Good to know about
.data
- I'm still not attached to Object.keys, need more time to get used to it.
- Well, you do, I don't.
-
I only skim read o/
-
your right, they are the same however CharacterData.data is more specific then Node.nodeValue. Note that Node.nodeValue is a no-op on a non-CharacterData node. and note that
elem.nodeValue === null
andelem.data === undefined
-
Object.keys is simply the more efficient way to enumerate over own enumerable property names of an object. Do a jsperf, it's always faster. If you don't like using functions then iterate over the keys array
var keys = Object.keys(poke); for (var i = 0, len = keys.length; i < len; i++) { // do stuff }
4: elem.textContent = foo
is the same as removeAllChildNodes(elem);elem.appendChild(document.createTextNode(foo);
@Raynos
3. I'll give Object.keys
another shot
4. And if I do not want to call removeAllChildNodes
?
4: then obvouisly you don't want to use .textContent
. However in the particular example it doesn't matter because removeAllChildNodes
is a no-op (there are no childNodes) and .textContent
is faster and simpler in that case.
@ALL lol, so much cursing in a code review...
for ( var detail in poke ) { if ( poke.hasOwnProperty(detail) ) {
DOING IT WRONGfor the love god use
Object.keys
Object.keys(poke).foreach(createTD)