<body>
<input type="button" value="按钮" id="btn"/>
<script>
document.getElementById("btn").onclick = function () {
document.write("<p>这是一个p</p>");
};
</script>
</body>
缺陷：如果实在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的所有的内容全部被替换掉（因为以上代码执行完毕后按钮不见了）
（2）对象.innerHTML="标签及代码"；
<body>
<input type="button" value="按钮" id="btn"/>
<div id="box">这是div</div>
<script>
document.getElementById("btn").onclick = function () {
document.getElementById("box").innerHTML = "<p>哈哈哈</p>";
};
</script>
</body>
（3) document.createElement("标签的名字")
<button id="btn">按钮</button>
<div id="box"></div>
<script>
document.getElementById('btn').onclick=function(){
var obj=document.createElement("ul");
obj.innerHTML="<li>哈哈哈</li>";
document.getElementById("box").appendChild(obj);
}
</script>
这种写法按一次，创建一个li
只创建一个元素，有则删除，无则创建：
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script>
//先判断有没有, 有就删除, 然后再创建
document.getElementById("btn").onclick = function () {
//判断,div中有没有这个按钮,有就删除
//判断这个按钮的子元素是否存在
if (document.getElementById("btn2")) {//如果为true就有
document.getElementById("dv").removeChild(document.getElementById("btn2"));
}
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮";
obj.id = "btn2";
document.getElementById("dv").appendChild(obj);
if (!document.getElementById("btn2")) {//如果为true就没有
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮";
obj.id = "btn2";
document.getElementById("dv").appendChild(obj);
}
};
</script>
</body>
