SOURCE

console 命令行工具 X clear

                    
>
console
window.onload=function(){
    //给body添加一个div元素 div里面包括一个p元素,p元素有很多文字
    var oDiv=document.createElement("div");
    var oP=document.createElement("p");
    oDiv.appendChild(oP);
    var oText=document.createTextNode("Hi form Dynamic DOM");
    oP.appendChild(oText);

    var oP1=document.createElement("p");
    oDiv.appendChild(oP1);
    var oText1=document.createTextNode("Hi form Dynamic DOM 2");
    oP.appendChild(oText1);

    document.body.appendChild(oDiv);

    var oDiv1=document.createElement("div");
    document.body.appendChild(oDiv1);
    //包含元素
    oDiv1.innerHTML="<p> Hi from innerHTML <p>\
                    <p> Hi from innerHTML 2 <p>\
                    <p> Hi from innerHTML 3 <p>";


    //包含文本
    console.log("line 22" + oDiv1.innerText);


    //给body 添加一个ip
    var ip=document.createElement('input');
    ip.id="botn";
    ip.type="button";
    ip.value="按钮";
    document.body.appendChild(ip);


    //用HTML属性插入
    var oDiv2=document.createElement("div");
    oDiv2.innerHTML="<input id='btn'type='button' value='按钮1'/>";
    document.body.appendChild(oDiv2);
    //document.write 覆写全部文档
    //document.body.innerHTML,也会覆写全部文档,也可改某个区域

    var oDiv1 = document.createElement("div");
    oDiv1.innerHTML="<p>Hi, innerHTML</p><p> the second innerHTML</p><p> the third innerHTML</p>";
    document.body.appendChild(oDiv1); 
    
    document.body.innerHTML 






}
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
        </style>
        <script>
        
        </script>
    </head>
    <body>
    </body>
</html>