方法1：document.write(“标签代码及内容”);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="创建一个p" id="btn"/> 内容内容内容内容 <script> //页面加载完点击按钮创建元素，body内原来的内容都没有了 document.getElementById("btn").onclick=function () { document.write("<p>这是一个p</p>"); }; //页面加载完毕前创建，原来的内容还在 // document.write("<p>这是一个p</p>"); </script> </body> </html>缺陷：如果是在页面加载完毕后创建元素,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被覆盖
方法2：对象.innerHTML="标签代码及内容"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; border:2px solid pink; } </style> </head> <body> <input type="button" value="创建一个p" id="btn" /> <div id="dv"></div> <script> document.getElementById("btn").onclick=function () { document.getElementById("dv").innerHTML="<p>这是一个p标签</p>"; }; </script> </body> </html>缺陷：点一次按钮就重新创建一次p标签，性能不好
方法3：document.createElement(“标签名字”) 步骤： （1）创建元素 （2）把元素追加到父级元素中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 200px; height: 150px; border: 2px dashed pink; } </style> </head> <body> <input type="button" value="创建p" id="btn"/> <div id="dv"></div> <script> document.getElementById("btn").onclick = function () { //创建元素的 var pObj = document.createElement("p"); pObj.innerText = "ppp"; //把创建后的子元素追加到父级元素中 document.getElementById("dv").appendChild(pObj); }; </script> </body> </html>该方法点击按钮一直创建元素
只创建一个元素的方法： 判断是否有这个元素，无则创建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>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")){//没有按钮则创建 var obj=document.createElement("input"); obj.type="button"; obj.value="按钮"; obj.id="btn2"; my$("dv").appendChild(obj); } }; </script> </body> </html>