js dom 实例

例子1

< html >
     < head >
         < title >createElement() Example </ title >
         < script type ="text/javascript" >
             function createMessage() {
                 var oP = document.createElement( " p " );
                 var oText = document.createTextNode( " Hello World! " );
                 oP.appendChild(oText);
                 document.body.appendChild(oP);
             }
         </ script >

<style>
div
{
  background-color:red
}
</style>

     </ head >
     < body onload ="createMessage()" >
     </ body >
</ html >

removeChild()、replaceChild()、insertBefore()
删除节点

< html >
     < head >
         < title >removeChild() Example </ title >
         < script type ="text/javascript" >
             function removeMessage() {
                 var oP = document.body.getElementsByTagName( " p " )[ 0 ];
                 oP.parentNode.removeChild(oP);
             }
         </ script >
     </ head >
     < body onload ="removeMessage()" >
         < p >Hello World! </ p >
     </ body >
</ html >

替换

< html >
     < head >
         < title >replaceChild() Example </ title >
         < script type ="text/javascript" >
             function replaceMessage() {
                 var oNewP = document.createElement( " p " );
                 var oText = document.createTextNode( " Hello Universe! " );
                 oNewP.appendChild(oText);
                 var oOldP = document.body.getElementsByTagName( " p " )[ 0 ];
                 oOldP.parentNode.replaceChild(oNewP, oOldP);
             }
         </ script >
     </ head >
     < body onload ="replaceMessage()" >
         < p >Hello World! </ p >
     </ body >
</ html >

新消息添加到旧消息之前

< html >
     < head >
         < title >insertBefore() Example </ title >
         < script type ="text/javascript" >
             function insertMessage() {
                 var oNewP = document.createElement( " p " );
                 var oText = document.createTextNode( " Hello Universe! " );
                 oNewP.appendChild(oText);
                 var oOldP = document.getElementsByTagName( " p " )[ 0 ];
                 document.body.insertBefore(oNewP, oOldP);
             }
         </ script >
     </ head >
     < body onload ="insertMessage()" >
         < p >Hello World! </ p >
     </ body >
</ html >

window.onload    =    function(){
    var txt = document.createTextNode("hello world!");
    var div = document.createElement("div");
    div.appendChild(txt);
    document.body.appendChild(div);
}