元素创建的三种方式
为了提高用户的体验
1. document.write("标签的代码以及内容");
页面加载的时候创建,是没有问题的：document.write("<p>这是一个p</p>");
缺陷：如果在页面加载完毕后，通过这种方法创建，页面上存在的所有内容都没有了
my$("btn").onclick=function(){
document.write("<p>这是一个p</p>");
};
2. 父级对象.innerHTML("标签的代码以及内容");
my$("btn").onclick=function () {
my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
};
3. document.createElement("标签的名字");
第一步：document.createElement("标签的名字");
第二步：追加：父级元素.appendChild(子级元素对象);
插入：父级元素.inerstBefore(新的子级对象,参照的子级对象);
移除：父级元素.removeChild(要干掉的子级元素对象);
//点击按钮,在div中创建一个p my$("btn").onclick = function () { //创建元素的 var pObj = document.createElement("p"); setInnnerText(pObj, "这是一个p"); //把创建后的子元素追加到父级元素中 my$("dv").appendChild(pObj); };
第3种方法会连续的创建元素，解决方法：有则删除,无则创建
只创建一个元素， 代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <input type="button" value="显示效果" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> //有则删除,无则创建 //方法一:缺点:不停的在创建和删除 // my$("btn").onclick = function() { // if (my$("btn2")) {//如果存在就删除 // my$("dv").removeChild(my$("btn2")); // }//进行创建 // var inObj = document.createElement("input"); // inObj.type = "button"; // inObj.value = "我是被创建的按钮"; // inObj.id = "btn2"; // my$("dv").appendChild(inObj); // }; //方法二:只创建一次 my$("btn").onclick=function(){ if(!my$("btn2")){//如果没有,则创建;如果有就不执行——只创建一次 var inObj = document.createElement("input"); inObj.type = "button"; inObj.value = "我是被创建的按钮"; inObj.id = "btn2"; my$("dv").appendChild(inObj); } }; </script> </body> </html>