07-DOM操作练习：innerHTML的方式创建元素

动态创建DOM元素的三种方式

  • document.write(); 不常用，因为容易覆盖原来的页面。

  • innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点)

  • document.createElement(); 用得也比较多，指定数量的时候一般用它。

1、方式一：

  1. document.write();

这种方式的好处是：比较随意，想创建就创建，可以直接在write里写属性都行。但是会把原来的标签给覆盖掉。所以不建议。

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <ul>
  9.     smyhvae
  10. </ul>
  12. <script>
  13.     //第一种创建方式：document.write();
  14.     document.write("<li class='hehe'>我是document.write创建的</li>");
  15. </script>
  16. </body>
  17. </html>

效果如下：

07-DOM操作练习：innerHTML的方式创建元素 - 图1

方式二：innerHTML

举例如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <ul>
  9.     smyhvae
  10. </ul>
  12. <script>
  13.     var ul = document.getElementsByTagName("ul")[0];
  15.     //第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
  16.     ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"  //注意，是用符号“+=”，不是“=”
  17. </script>
  18. </body>
  19. </html>

注意，上方代码中，是用是用符号+=，不是=，前者是在原来的基础之上增加，后者是替换。

效果如下：

07-DOM操作练习：innerHTML的方式创建元素 - 图2

3、方式三：利用DOM的api创建

利用DOM的api创建节点，有很多种：

比如：

  • createElement()

  • appendChild()

  • removeChild()

  • insertBefore()

  • replaceChild()

这个我们在上一篇文章的DOM节点的操作这一段中已经讲到了。

innerHTML举例：在线用户的获取

现在要做下面这样一个页面：

07-DOM操作练习：innerHTML的方式创建元素 - 图3

上图的意思是，每次刷新页面，都从服务器获取最新的在线人数的名单（我们先用本地的数组来模拟服务器上的数据）。

它的结构是：div > ul > li。每一个li就是一个头像。

如果在本地直接添加几个头像的话，代码是：

  1.     //往ul中添加li元素以及li元素中的内容
  2.        ul.innerHTML += '<li>'+
  3.                        '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="千古壹号"></a>'+
  4.                        '<p><a href="#" title="千古壹号" target="_blank">千古壹号</a></p>'+
  5.                    '</li>';
  6.        ul.innerHTML += '<li>'+
  7.                '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="千古壹号"></a>'+
  8.                '<p><a href="#" title="千古壹号" target="_blank">千古壹号</a></p>'+
  9.                '</li>';
  10.        ul.innerHTML += '<li>'+
  11.                '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="千古壹号"></a>'+
  12.                '<p><a href="#" title="千古壹号" target="_blank">千古壹号</a></p>'+
  13.                '</li>';

上方代码有两点比较重要：

  • 我们是通过ul.innerHTML += 元素节点的方式来不停地往ul里面加内容，比createElement的方式要方便。

  • 元素的内容本身有双引号"，所以我们要用单引号'进行字符串的连接。

但是，当我们从服务器获取在线用户的时候，头像和用户的昵称是动态变化的，所以每个字符串要用变量进行表示：

  1.         ul.innerHTML += '<li>'+
  2.                             '<a href="#" target="blank"><img src="'+users[i].icon+'" width="48" height="48" alt="'+users[i].name+'"></a>'+
  3.                             '<p><a href="#" title="'+users[i].name+'" target="_blank">'+users[i].name+'</a></p>'+
  4.                         '</li>';

这里我们暂时用本地的数组来代表服务器的数据，最终的完整版代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             word-wrap: break-word;
  9.         }
  11.         .wp {
  12.             width: 730px;
  13.             margin: 0px auto;
  14.         }
  16.         .mtn {
  17.             margin-top: 5px !important;
  18.         }
  20.         #ct .frame {
  21.             margin: 0;
  22.             border: none;
  23.         }
  25.         .xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
  26.             background-color: #A90000;
  27.             background-position: 0 -99px;
  28.         }
  30.         .xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
  31.             color: #FFF !important;
  32.         }
  34.         .xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
  35.             border: none;
  36.             background: transparent url(images/mu.png) repeat-x 0 95;
  37.         }
  39.         .title {
  40.             padding: 0 10px;
  41.             height: 32px;
  42.             font-size: 14px;
  43.             font-weight: 700;
  44.             line-height: 32px;
  45.             overflow: hidden;
  46.         }
  48.         .block {
  49.             margin: 10px 10px 0;
  50.         }
  52.         ul, menu, dir {
  53.             display: block;
  54.             list-style: none;
  55.             -webkit-margin-before: 1em;
  56.             -webkit-margin-after: 1em;
  57.             -webkit-margin-start: 0px;
  58.             -webkit-margin-end: 0px;
  59.             -webkit-padding-start: 25px;
  60.         }
  62.         .mls li {
  63.             padding: 0 0 5px;
  64.             width: 66px;
  65.             height: 85px;
  66.         }
  68.         .ml li {
  69.             float: left;
  70.             text-align: center;
  71.             overflow: hidden;
  72.         }
  74.         a {
  75.             color: #333;
  76.             text-decoration: none;
  77.             font: 12px/1.5 Tahoma, 'Microsoft Yahei', 'Simsun';
  78.         }
  80.         .mls p {
  81.             margin-top: 5px;
  82.         }
  84.         .ml p, .ml span {
  85.             display: block;
  86.             width: 100%;
  87.             height: 20px;
  88.             white-space: nowrap;
  89.             text-overflow: ellipsis;
  90.             overflow: hidden;
  91.         }
  93.         .mls img {
  94.             width: 48px;
  95.             height: 48px;
  96.         }
  98.         .ml img {
  99.             display: block;
  100.             margin: 0 auto;
  101.         }
  103.         a img {
  104.             border: none;
  105.         }
  106.     </style>
  107. </head>
  108. <body>
  110. <div class="wp mtn">
  111.     <div id="diy3" class="area">
  112.         <div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1">
  113.             <div
  114.                     class="title frame-title"><span class="titletext">当前在线用户</span></div>
  115.             <div id="frameipq7f2_left"
  116.                  class="column frame-1-c">
  117.                 <div
  118.                         id="frameipq7f2_left_temp" class="move-span temp"></div>
  119.                 <div id="portal_block_695"
  120.                      class="block move-span">
  121.                     <div
  122.                             id="portal_block_695_content" class="dxb_bc">
  123.                         <div class="module cl ml mls" id="users">
  124.                             <ul>
  125.                                 <!--<li>-->
  126.                                 <!--<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="千古壹号"></a>-->
  127.                                 <!--<p><a href="#" title="千古壹号" target="_blank">千古壹号</a></p>-->
  128.                                 <!--</li>-->
  130.                             </ul>
  131.                         </div>
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.     </div>
  137. </div>
  139. <script>
  140.     //模拟从服务器获取数据
  141.     var users = [
  142.         {"name": "smyhvae", "icon": "images/noavatar_small.gif"},
  143.         {"name": "smyh", "icon": "images/noavatar_small.gif"},
  144.         {"name": "smyh02", "icon": "images/75_avatar_small.jpg"},
  145.         {"name": "vae", "icon": "images/89_avatar_small.jpg"},
  146.         {"name": "today", "icon": "images/noavatar_small.gif"},
  147.         {"name": "enen", "icon": "images/noavatar_small.gif"},
  148.         {"name": "oyey", "icon": "images/noavatar_small.gif"},
  149.         {"name": "dongxiaojie", "icon": "images/noavatar_small.gif"},
  150.         {"name": "qishi", "icon": "images/noavatar_small.gif"},
  151.         {"name": "qqtang", "icon": "images/noavatar_small.gif"},
  152.         {"name": "wawawa", "icon": "images/noavatar_small.gif"},
  153.         {"name": "haha", "icon": "images/noavatar_small.gif"},
  154.         {"name": "robot", "icon": "images/noavatar_small.gif"},
  155.         {"name": "heheda", "icon": "images/noavatar_small.gif"},
  156.         {"name": "smyhvae1", "icon": "images/noavatar_small.gif"},
  157.         {"name": "lihaile", "icon": "images/noavatar_small.gif"}
  158.     ];
  160.     //需求：页面显示所有的在线用户。
  161.     //思路：模拟服务器获取数据（数组中装着json）.获取ul，把ul的innerHTML属性获取到，然后不间断的往innerHTML属性中赋值。
  162.     //赋值要求：li标签的内容。
  163.     //步骤：(获取元素)
  164.     var div = document.getElementById("users");
  165.     var ul = div.firstElementChild || div.firstChild;
  166.     //        var ul = div.children[0];
  168.     //1.模拟服务器获取数据（定义数组），通过循环添加元素（定义for）
  169.     //数组中有多少元素，我们就创建多少个li标签
  170.     for (var i = 0; i < users.length; i++) {
  171.         //2.模拟实验的操作方式。
  172.         ul.innerHTML += '<li>' +
  173.             '<a href="#" target="blank"><img src="' + users[i].icon + '" width="48" height="48" alt="' + users[i].name + '"></a>' +
  174.             '<p><a href="#" title="' + users[i].name + '" target="_blank">' + users[i].name + '</a></p>' +
  175.             '</li>';
  176.     }
  177. </script>
  178. </body>
  179. </html>

工程文件：

innerHTML举例2：模拟百度搜索的下方提示

要求实现的效果如下：

07-DOM操作练习：innerHTML的方式创建元素 - 图4

在这之前，我们先实现这样一个例子：判断字符串以某个字符串为开头。

判断字符串是否以某个字符串为开头：

  1.     var str = "smyhvae";
  3.     //判断str是否以sm为开头？（给定字符串，然后他的索引值为0）
  4.     var num = str.indexOf("sm");
  5.     //只有返回值为0，那么字符串才是以参数为开头
  6.     //如果在任何位置都查询不到参数，则返回值为-1；

代码解释：我们可以通过indexOf("参数")来实现。如果返回的索引值为0，说明字符串就是以这个参数开头的。

为了实现上方gif图的搜索功能，完整版代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  12.         .box {
  13.             width: 500px;
  14.             margin: 200px auto;
  15.         }
  17.         ul {
  18.             width: 392px;
  19.             padding: 5px;
  20.             list-style: none;
  21.             border: 1px solid red;
  22.         }
  24.         li:hover {
  25.             background-color: red;
  26.         }
  28.         input {
  29.             width: 400px;
  30.         }
  32.         button {
  33.             width: 70px;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38. <div class="box">
  39.     <input type="text"/>
  40.     <button>搜索</button>
  41.     <!--<ul>-->
  42.     <!--<li>aaaa</li>-->
  43.     <!--<li>bbb</li>-->
  44.     <!--<li>ccc</li>-->
  45.     <!--</ul>-->
  46. </div>
  48. <script>
  49.     //需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
  51.     //1.获取事件源
  52.     //模拟服务器获取内容
  53.     var arr = ["a", "ab", "abc", "abcd", "aa", "aaa"];
  54.     var box = document.getElementsByTagName("div")[0];
  55.     var inp = box.children[0];
  56.     //        var inp = document.getElementsByTagName("input")[0];
  58.     //2.绑定事件(输入内容(输入事件，键盘弹起事件))
  59.     inp.onkeyup = function () {
  60.         //创建一个字符串，里面添加满了li和对应的内容。
  61.         var newArr = [];
  62.         //遍历老数组arr，然后判断每一项，只要是以input的内容为开头的，就添加到新数组newArr中，然后转成字符串。
  63.         for (var i = 0; i < arr.length; i++) {
  65.             //获取输入内容input标签的value属性值。
  66.             if (arr[i].indexOf(this.value) === 0) {  //【重要】判断老数组arr中的每一项，是否以input的内容为开头
  67.                 newArr.push("<li>" + arr[i] + "</li>");
  68.             }
  69.         }
  70.         var str = newArr.join("");
  72.         //Bug1：每次创建新的ul之前，如果有就的ul，就先删除旧的ul
  73.         if (box.getElementsByTagName("ul")[0]) {
  74.             //只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
  75.             box.removeChild(box.children[2]);
  76.         }
  78.         //Bug2.如果input的内容为空，那么就不能再生成ul了。
  79.         //如果input为空，那就切断函数
  81.         //Bug3.如果arr数组中找不到以input为开头的元素。那就切断函数
  82.         //newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
  83.         if (this.value.length === 0 || newArr.length === 0) {  //fix bug2、fix bug3
  84.             //切断函数，直接return
  85.             return;
  86.         }
  88.         //3.书写事件驱动程序
  89.         var ul = document.createElement("ul");
  90.         //把创建好的内容添加到ul中。
  91.         ul.innerHTML = str;
  92.         box.appendChild(ul);
  93.     }
  94. </script>
  95. </body>
  96. </html>

动态操作表格

方式1：

  1.   createElement()

方式2：

  • rows (只读，table和textarea能用)

  • insertRow() (只有table能调用)

  • deleteRow() (只有table能调用)

  • cells (只读，table和textarea能用)

  • insertCell() (只有tr能调用)

  • deleteCell() (只有tr能调用)

PS：括号里可以带index。用的不多。