点击前:
点击后(页面地址不变但是将所有东西都删除了):
点击前:
点击后:
(1)创建图片
<input type="button" id="btn" value="来个图片"/> <div id="dv"> </div> <script> my$("btn").onclick = function () { my$("dv").innerHTML = "<img src='images/liuyan.jpg' alt=''>" } </script>点击前:
点击后:
(2)动态创建列表+鼠标高亮
<input type="button" value="动态创建列表" id="btn"/> <div id="dv"></div> <script> var names = ["Phoebe", "Chandler", "Ross", "Rachel", "Joey", "Monica"]; my$("btn").onclick = function () { str = "<ul>"; for (var i = 0; i < names.length; i++) { str += "<li>" + names[i] + "</li>"; } str += "</ul>"; my$("dv").innerHTML = str; var liObj = my$("dv").getElementsByTagName("li"); for (var i = 0; i < liObj.length; i++) { liObj[i].onmouseover = function () { this.style.backgroundColor = "yellow"; }; liObj[i].onmouseout = function () { this.style.backgroundColor = ""; }; } }; </script>点击前:
点击后:
点击前:
点击后:
(1)动态创建列表+高亮
<input type="button" value="动态创建列表" id="btn"/> <div id="dv"> </div> <script> var names = ["Phoebe", "Chandler", "Ross", "Rachel", "Joey", "Monica"]; my$("btn").onclick = function () { var ulObj = document.createElement("ul"); my$("dv").appendChild(ulObj); for (var i = 0; i < names.length; i++) { var list = document.createElement("li"); //下面两个方法都可以用 //list.innerText = names[i]; setInnerText(list, names[i]); my$("dv").appendChild(list); list.onmouseover = onmouseoverlist; list.onmouseout = onmouseoutlist; } }; //设置这两个函数是因为在循环中如果循环使用匿名函数的话会开辟过多的空间,导致代码效率低 //如果使用命名函数系统只会开辟两个空间存放命名函数 //所以如果在循环中的话建议使用命名函数 //而在循环以外则建议使用匿名函数 function onmouseoverlist() { this.style.backgroundColor = "yellow"; } function onmouseoutlist() { this.style.backgroundColor = ""; } </script>点击前:
点击后:
(2)动态创建表格
<input type="button" value="创建表格" id="btn"/> <div id="dv"></div> <script> var arr = [ {name: "百度", href: "http://www.baidu.com"}, {name: "B站", href: "https://www.bilibili.com/"}, {name: "胖鸟", href: "http://www.pniao.com/"}, {name: "豆瓣", href: "https://movie.douban.com/"}, {name: "", href: "https://www.csdn.net/"} ]; //创建table my$("btn").onclick = function () { var tabObj = document.createElement("table"); tabObj.border = "1"; tabObj.cellPadding = "0"; tabObj.cellSpacing = "0"; my$("dv").appendChild(tabObj); for (var i = 0; i < arr.length; i++) { var trObj = document.createElement("tr"); tabObj.appendChild(trObj); //在行中插入两列 //第一列 var td1 = document.createElement("td"); setInnerText(td1, arr[i].name); trObj.appendChild(td1); //第二列 var td2 = document.createElement("td"); td2.innerHTML = "<a href='" + arr[i].href + "'>" + arr[i].name + "</a>"; trObj.appendChild(td2); } } </script>点击前:
点击后:
点击添加按钮多次:
点击删除一个元素按钮:
点击删除所有元素按钮:
效果(点击多次只能创建一个元素):