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

    var oP1 = document.createElement("p");
    oDiv.appendChild(oP1);
    var oText1 = document.createTextNode("hi 2");
    oP1.appendChild(oText1);

    var oP2 = document.createElement("p");
    oDiv.appendChild(oP2);
    var oText2 = document.createTextNode("hi 3");
    oP2.appendChild(oText2);

    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("line22 " + oDiv.innerText);
    console.log("line23 " + oDiv1.innerText);

//在body元素中插入一个按钮：<input id="btn" type="button" value="按钮"/>
//appendChild()方法
var oid=document.createElement("id");
    document.body.appendChild(oid);         
    
//innerHTML属性方法
var ooid1 = document.createElement("id");
    document.body.appendChild(oid1);
    oid1.innerHTML="";

//区别
//document.write会改整个区域
//innerHTML一部分区域
}

<!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>