search

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

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

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

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

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

1、方式一：

document.write();

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

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    smyhvae
</ul>

<script>
    //第一种创建方式：document.write();
    document.write("<li class='hehe'>我是document.write创建的</li>");
</script>
</body>
</html>

效果如下：

方式二：innerHTML

举例如下：

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

效果如下：

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

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

比如：

  • createElement()

  • appendChild()

  • removeChild()

  • insertBefore()

  • replaceChild()

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

hashtag
innerHTML举例：在线用户的获取

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

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

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

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

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

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

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

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

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

工程文件：

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

要求实现的效果如下：

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

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

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

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

hashtag
动态操作表格

方式1：

方式2：

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

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

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

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

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

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

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

Previous05-DOM操作练习：访问关系的封装Next07 J Query

Last updated