Saturday, July 14, 2007

DOM manipulate of Javascript


<div id="div1"></div>

<script type="text/javascript" charset="utf-8">
function doc (argument) {
document.write(argument);
document.write("<br />\n");
}

function insertAfter (newNode, refNode) {
if (refNode.parentNode){
var nextNode = refNode.nextSibling;
if (nextNode){
this.insertBefore(newNode, nextNode);
} else {
this.appendChild(newNode);
}
}
}
HTMLTableCellElement.prototype.insertAfter = insertAfter;

var frag = document.createDocumentFragment();
var d1 = document.getElementById('div1');
var table = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
var coms = document.createComment('test comment');
var attr = document.createAttribute('style');
var textNode1 = document.createTextNode(' this is text node 1! ');
var textNode2 = document.createTextNode(' this is text node 2! ');
var textNode3 = document.createTextNode(' 33333! ');
var clonedText = textNode3.cloneNode(false);

frag.appendChild(table);
table.appendChild(tr);
tr.appendChild(td);
td.appendChild(textNode1);
td.insertBefore(coms, textNode1);
td.insertBefore(textNode2, textNode1);
td.insertAfter(clonedText, textNode1);

var clonedTr = tr.cloneNode(true);
table.appendChild(clonedTr); // this is text node 2! this is text node 1! 33333!
d1.appendChild(frag);

textNode2.data = ' 22222! '; // 22222! this is text node 1! 33333!
td.setAttribute('style', 'background-color: #ddd');
// td.style.backgroundColor = '#ccc';
td.style.border = 'red solid 1px';

doc(frag);
doc(clonedText);
doc(td);
</script>

No comments :