元素创建-----为了提高用户的体验
元素创建的三种方式:
1. document.write("标签的代码及内容");
2. 对象.innerHTML="标签及代码";
3. document.createElement("标签的名字");
1. document.write("标签的代码及内容");
my$("btn").onclick = function () { document.write("<p>这是一个标签</p>"); };
案例1：用documnet.write嵌入外部的代码内容（例子：百度新闻码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style type=text/css> div { font-size: 12px; font-family: arial } .baidu { font-size: 14px; line-height: 24px; font-family: arial } a, a:link { color: #0000cc; } .baidu span { color: #6f6f6f; font-size: 12px } a.more { color: #008000; } a.blk { color: #000; font-weight: bold; }</style> </head> <body> <script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=x%20title%3Aiphone&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script> </body> </html>
2. 对象.innerHTML="标签及代码";
//点击按钮,在div中创建一个p标签 //第二种方式创建元素: 对象.innerHTML="标签代码及内容"; my$("btn").onclick = function () { my$("dv").innerHTML = "<p>床前明月光 疑是地上霜，举头望明月，低头思故乡</p>" };
案例2：点击按钮,在div中创建一个图片
<input type="button" value="来个图片" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { my$("dv").innerHTML = "<img src='images/liuyan.jpg' alt='美女' />"; }; </script>
案例3：点击按钮创建列表，鼠标移过改变背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 250px; height: 350px; background-color: pink; } </style> </head> <body> <input type="button" value="创建列表" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "令狐冲"] var str = "<ul style='list-style-type:none;cursor:pointer'>"; my$("btn").onclick = function () { //根据循环创建对应对数的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 = "hotpink"; }; list[i].onmouseout = function () { this.style.backgroundColor = ""; }; } }; </script> </body> </html>
3. document.createElement("标签的名字");
创建元素：document.createElement("标签名字");对象
把元素追加到父级元素中
点击按钮,在div中创建一个p
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 200px; height: 150px; border: 1px solid pink; } </style> </head> <body> <input type="button" value="创建p" id="btn" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { //创建元素 var pObj = document.createElement("p"); pObj.innerText = ("这是一个p"); // setInnerText(pObj, "这是一个p"); //把创建后的子元素追加到父级元素中 my$("dv").appendChild(pObj); }; </script> </body> </html>
案例4：点击按钮，动态的创建列表，鼠标滑过高亮
如果是循环的方式添加事件,推荐用命名函数
如果不是循环的方式添加事件,推荐使用匿名函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 400px; border: 2px solid pink; } ul { list-style-type: none; cursor: pointer; } </style> </head> <body> <input type="button" value="创建动态列表" id="btn" /> <div id="dv"></div> <!-- <input type="button" value="创建列表" id="btn"/> <div id="dv"></div> --> <script src="common.js"></script> <script> //点击按钮动态的创建列表,把列表加到div中 var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经"]; my$("btn").onclick = function () { //创建ul,把ul立刻加入到父级元素div中 var ulObj = document.createElement("ul"); my$("dv").appendChild(ulObj); //追加子元素 //动态的创建li,加到ul中 for (var i = 0; i < kungfu.length; i++) { var liObj = document.createElement("li"); //设置li中间的文字内容 liObj.innerHTML = kungfu[i]; ulObj.appendChild(liObj); //为li添加鼠标进入和离开事件 liObj.onmouseover = mouseoverHandle; liObj.onmouseout = mouseoutHandle; } }; //此位置.按钮的点击事件的外面 function mouseoverHandle() { this.style.backgroundColor = "hotpink"; } function mouseoutHandle() { this.style.backgroundColor = ""; } // 如果是循环的方式添加事件,推荐用命名函数 // 如果不是循环的方式添加事件,推荐使用匿名函数 </script> </body> </html>
案例5：点击按钮创建一个表格
自己给自己debug好久，才发现没有把创建的2个列放进for循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 300px; height: 300px; border: 2px solid hotpink; } </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); //创建行tr,加入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>