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 from Dynamic DOM");
    oP.appendChild(oText);

    var oP1 = document.createElement("p");
    oDiv.appendChild(oP1);
    var oText1 = document.createTextNode("Hi from 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);

    //4.appedChild( )方法在body元素中插入一个按钮
   var oInput = document.createElement("input");
            oInput.id = "btn";
            oInput.type = "button";
            oInput.value = "按钮";
            document.body.appendChild(oInput);

    //4.innerHTML属性插入
    document.body.innerHTML="<input id='btn' type='button' value='按钮' />";

    //document.write--覆盖整个文档
    //document.write("<div><p>Hi, I'm writen by document.write</p></div>");


}
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
        </style>
        <script>
        
        </script>
    </head>
    <body>
        <button style="width:100px" data="button">测试</button>
    </body>
</html>