API创建元素的三种方法

 

第一种：

document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

<input type="button" value="第一种方式创建" id="btn">
<div id="dv">

</div>
<script>

    my$("btn").onclick=function(){
        document.write("<h1>你好</h1>");
    }
</script>

缺点：点击按钮之后，会替换掉页面之前的内容，不推荐使用8这种方法；

第二种:

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

<input type="button" value="第二种方式创建" id="btn1">
<div id="dv">

</div>
<script>

    my$("btn1").onclick=function(){
        my$("dv").innerHTML="<p>哈哈哈哈</p>";
    }
</script>

相比第一种，用innerHTML方法，不会替换掉当前页面的内容

第三种：

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div); 

<button id="btn">创建</button>

<div id="dv"></div>

<script>

   my$("btn").onclick=function(){
        var pObj=document.createElement("p");
        //console.log("p");
        //追加到父元素中
        my$("dv").appendChild(pObj);
        //添加文本内容
        pObj.innerHTML="hahhhh就哈吉";
        pObj.className="cls";
    }
</script>