SOURCE

console 命令行工具 X clear

                    
>
console
window.onload=function(){

    var oDiv=document.createElement("div");
    var oP=document.createElement("P");
    var oText=document.createTextNode("Hi,dynamic DOM");
    oP.appendChild(oText);
    oDiv.appendChild(oP);

    var oP1=document.createElement("P");
    var oText1=document.createTextNode("second dynamic DOM");
    oP1.appendChild(oText1);
    oDiv.appendChild(oP1);

    document.body.appendChild(oDiv);

    var oDiv1=document.createElement("div");
    oDiv1.innerHTML="<p>Hi,innerHTML</p><p> second innerHTML</p>";
    document.body.appendChild(oDiv1);
    console.log("oDiv's innerText:"+oDiv.innerText);
    console.log("oDiv1's innerText:"+oDiv1.innerText);
    
//使用innerHTML插入按钮
    var div=document.createElement("div");
    div.innerHTML='<input id="btn" type="button" value="按钮1"/>';
    document.body.appendChild(div);

//使用appendChild()方法
    var mInput = document.createElement("input");
        mInput.id = "btn";
        mInput.type = "button";
        mInput.value = "按钮2";
        document.body.appendChild(mInput);
    //document.body.innerHTML="<div><p>Hi, I'm in body</p><p>Hi,I'm second liner</p>"
}
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
        </style>
        <script>
        
        </script>
    </head>
    <body>
    </body>
</html>