创建元素的三种方式
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉=
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="创建一个p" id="btn"/> 小苏是一个快乐的小男孩,人家今年才38岁.好帅哦 <script src="common.js"></script> <script> //document.write("标签代码及内容"); my$("btn").onclick=function () { document.write("<p>这是一个p</p>"); }; // document.write("<p>这是一个p</p>"); </script> </body> </html>
innerHTML
var box = document.getElementById('box'); box.innerHTML = '新内容<p>新标签</p>';
<!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 src="common.js"></script> <script> //点击按钮,在div中创建一个p标签 //第二种方式创建元素: 对象.innerHTML="标签代码及内容"; my$("btn").onclick=function () { my$("dv").innerHTML="<p>他日若水凌云志，敢笑黄巢不丈夫</p>"; }; </script> </body> </html>
document.createElement()
var div = document.createElement('div'); document.body.appendChild(div);
<!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 src="common.js"></script> <script> //第三种方式创建元素 //document.createElement("标签名字");对象 //把元素追加到父级元素中 //点击按钮,在div中创建一个p my$("btn").onclick = function () { //创建元素的 var pObj = document.createElement("p"); setInnnerText(pObj, "这是一个p"); //把创建后的子元素追加到父级元素中 my$("dv").appendChild(pObj); }; </script> </body> </html>
性能问题
- innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
- 可以借助字符串或数组的方式进行替换，再设置给innerHTML
- 优化后与document.createElement性能相近
案例
动态创建列表，高亮显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 300px; height: 400px; background-color: green; } </style> </head> <body> <input type="button" value="创建列表" id="btn"/> <div id="dv"></div> <script src="common.js"></script> <script> // my$("btn").οnclick=function () { // my$("dv").innerHTML="<ul><li>杨过</li><li>小龙女</li><li>张无忌</li> <li>张三丰</li></ul>"; // }; var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"]; my$("btn").onclick = function () { var str = "<ul style='list-style-type: none;cursor: pointer'>"; //根据循环创建对应对数的li for (var i = 0; i < names.length; i++) { str += "<li>" + names[i] + "</li>"; } str += "</ul>"; my$("dv").innerHTML = str; //代码执行到这里,li已经有了 //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件 var list = my$("dv").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { //鼠标进入 list[i].onmouseover = function () { this.style.backgroundColor = "yellow"; }; //鼠标离开 list[i].onmouseout = function () { this.style.backgroundColor = ""; }; } }; </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> var arr=[ {name:"百度",href:"http://www.baidu.com"}, {name:"谷歌",href:"http://www.google.com"}, {name:"优酷",href:"http://www.youku.com"}, {name:"土豆",href:"http://www.tudou.com"}, {name:"快播",href:"http://www.kuaibo.com"}, {name:"爱奇艺",href:"http://www.aiqiyi.com"} ]; //点击按钮创建表格 my$("btn").onclick=function () { //创建table加入到div中 var tableObj=document.createElement("table"); tableObj.border="1"; tableObj.cellPadding="0"; tableObj.cellSpacing="0"; my$("dv").appendChild(tableObj); //创建行,把行加入到table中 for(var i=0;i<arr.length;i++){ var dt=arr[i];//每个对象 var trObj=document.createElement("tr"); tableObj.appendChild(trObj); //创建第一个列,然后加入到行中 var td1=document.createElement("td"); td1.innerText=dt.name; trObj.appendChild(td1); //创建第二个列 var td2=document.createElement("td"); td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>"; trObj.appendChild(td2); } }; </script> </body> </html>
