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");
    oP1.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中插入一个按钮：<input id="btn" type="button" value="按钮"/>
    //写法一：用appendChild()
    var oDiv2 = document.createElement("div");
    var oBtn = document.createElement("button");
    oDiv2.appendChild(oBtn);
    oBtn.id="btn";
    var oText = document.createTextNode("按钮");
    oBtn.appendChild(oText);

    document.body.appendChild(oDiv2);
    //写法二：用innerHTML
    var oDiv3 = document.createElement("div");
    document.body.appendChild(oDiv3);
    oDiv3.innerHTML = "<input id='btn' type='button' value='按钮'/>"
}

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