Web API---DOM---元素创建的不同方式---三种方式,5个案例
程序员文章站
2022-11-07 19:49:37
元素创建 为了提高用户的体验 元素创建的三种方式: 1. document.write("标签的代码及内容"); 2. 对象.innerHTML="标签及代码"; 3. document.createElement("标签的名字"); 1. document.write("标签的代码及内容"); m ......
元素创建-----为了提高用户的体验
元素创建的三种方式:
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>