【前端】【JS】前端学习之路（十一）：DOM练习（六）（元素的三个创建方式）

1. document.write("标签的代码及内容")

<input type="button" value="创建一个p" id="btn"/> 小苏是一个快乐的小男孩,人家今年才38岁.好帅哦 <script> //document.write("标签代码及内容"); my$("btn").onclick = function () { document.write("<p>这是一个p</p>"); }; //document.write()创建元素 //缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉 </script>

点击前：

点击后（页面地址不变但是将所有东西都删除了）：

2. 对象.innerHTML="标签及代码"

<input type="button" value="创建一个p" id="btn"/> <div id="dv"></div> <script> //点击按钮,在div中创建一个p标签 //第二种方式创建元素: 对象.innerHTML="标签代码及内容"; my$("btn").onclick = function () { my$("dv").innerHTML = "<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>"; }; </script>

点击前：

点击后：

案例：

（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>

点击前：

点击后：

3. document.createElement("标签的名字")

<input type="button" value="创建p" id="btn"/> <div id="dv"></div> <script> //第三种方式创建元素 //创建元素 //document.createElement("标签名字");对象 //把元素追加到父级元素中 //点击按钮,在div中创建一个p my$("btn").onclick = function () { //创建元素的 var pObj = document.createElement("p"); //给p中添加内容 setInnerText(pObj, "这是一个p"); //把创建后的子元素追加到父级元素中 my$("dv").appendChild(pObj); }; </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>

点击前：

点击后：

4.元素操作的几种方法

<input type="button" value="添加一个元素" id="btn"> <input type="button" value="删除一个元素" id="btn2"> <input type="button" value="删除所有元素" id="btn3"> <div id="dv"></div> <script> //添加一个元素 var i = 0; my$("btn").onclick = function () { i++;//为按钮计数 var BuObj = document.createElement("input"); BuObj.type = "button"; BuObj.value = "按钮" + i; my$("dv").appendChild(BuObj); }; //删除一个元素 my$("btn2").onclick = function () { //删除对象的第一个子元素 my$("dv").removeChild(my$("dv").firstChild); }; //删除所有元素 my$("btn3").onclick = function () { while (my$("dv").firstChild) {//若第一个子元素存在则继续删除 my$("dv").removeChild(my$("dv").firstChild); } }; //替换元素 //my$("dv").replaceChild(my$("dv").firstChild, my$("dv").lastChild); </script>

点击添加按钮多次：

点击删除一个元素按钮：

点击删除所有元素按钮：

5.只创建一个元素

<input type="button" value="创建元素" id="btn"/> <div id="dv"></div> <script> //这是最初的元素创建方式： //只能重复进行创建 // my$("btn").onclick = function () { // // var BuObj = document.createElement("input"); // // BuObj.type = "button"; // BuObj.value = "按钮"; // // my$("dv").appendChild(BuObj); // // }; //只创建一个元素，一般遵循两个思路 //有则删除 // my$("btn").onclick = function () { // // if (my$("btn2")) { // my$("dv").removeChild(my$("btn2")); // } // // var BuObj = document.createElement("input"); // BuObj.type = "button"; // BuObj.value = "按钮"; // BuObj.id = "btn2"; // my$("dv").appendChild(BuObj); // // }; //无则创建 my$("btn").onclick = function () { if (!my$("btn2")) { var BuObj = document.createElement("input"); BuObj.type = "button"; BuObj.value = "按钮"; BuObj.id = "btn2"; my$("dv").appendChild(BuObj); } }; </script>

效果（点击多次只能创建一个元素）：