Skip to main content

使用脚本向页面上添加新元素

插入新元素​

脚本向页面上添加新元素这种需求经常遇见，其原理相对来说比较简单，有如下两个步骤：

  1. 首先使用 document.createElement 创建好你想要插入的元素，例如你想添加一个按钮，就这样写：document.createElement("button")；
  2. 然后找到你想要插入的目标位置，使用 append/insertBefore 之类的方法插入你的 element ，之后就可以在 F12开发者工具中的 Elements 中看到我们刚才插入的内容了。下面给出一个演示。

 > 💡 提示  >  > 如果你有很多的组件想放进去的话，可以使用 document.createElement("div")，然后在这个div中写入你的所有内容，最后再往 element 里的 innerHTML 直接写入 html 代码。

代码演示​

需求：

在一个html页面中有一个按钮，当我们点击这个按钮后，让其显示两个span标签的文本，并让这个按钮消失。

为了更好地学习这个内容，我们将 页面 和 显示span的js脚本 分开写，最后通过 js 代码实现这个需求。

先看这个 demo.html 内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="shortcut icon" href="./favicon.ico">
</head>
<body>

<button onclick="clickFunc()">生成span</button>

<script>
    function clickFunc() {
        // 构造标签元素，让其引入外部第三方js脚本文件
        let scriptEle = document.createElement("script")
        // 设置内容
        scriptEle.src = "使用脚本向页面上添加新元素.js";
        // 插入指定位置
        document.body.append(scriptEle);

        // 移除button
        let btn = document.querySelector("button")
        btn.remove();
    }
</script>
</body>
</html>

使用脚本向页面上添加新元素.js ：

let div = document.createElement("div");
div.innerHTML = "<span>span1</span><span>span2</span>";
// 插入到页面的body中
document.body.append(div)

新元素的事件监听​

元素是添加进去了，但是只能看不能用也没什么用，所以我们需要监听我们的元素事件。

最常用的就是 click 点击事件，点了我们的按钮，然我们的脚本做出一些响应。

单元素监听​

如果是类似按钮的方式，我们可以这样写，直接使用 onClick 方法。

使用脚本向页面上添加新元素.js ：

/*单元素监听*/
let btn = document.createElement("button");
btn.innerHTML = "按钮文字，其实也可以写html，变成下面的样子(不过谁用按钮来包那么多html标签呢)";
// innerText 也可以，区别是 innerText 不会解析 html
btn.onclick = function (){
    alert("点击了按钮");
};
// 插入到目标位置
document.body.append(btn);

多元素监听​

如果是写在一个 div 中的多个元素，可以使用下面的方式处理多个元素的点击事件。

使用脚本向页面上添加新元素.js ：

/*多元素监听*/
// 创建一个新的div元素
let div = document.createElement("div");
// 向这个div元素中添加入内容
div.innerHTML = "<span id=\"span-1\">span1</span><span class=\"sp\">span class</span>";
// 绑定监听事件
div.onclick = function (event) {
    if (event.target.id === "span-1") {
        alert("span-1被点击了");
    } else if (event.target.className === "sp") {
        alert("sp这一类被点了");
    }
};
// 将div元素插入到目标位置
document.body.append(div);

这两种监听方式的区别，简单来说就是前一种方法我们监听的只有一个元素，那我们就知道点击事件只可能是对这一个元素的操作。

第二个例子中，因为其中包含了多个元素，我们就需要从 event 事件中找到实际被点击的元素（可以通过 id 或者 class 等去判断），来执行我们的脚本处理逻辑。

监听器的绑定方式​

另外再补充一下，上面的 onclick 可以改写成 div.addEventListener("click")，类似下面这样：

div.addEventListener("click", function (ev) {
    console.log(ev);
});

主要区别是 onclick 只能绑定一个 function，addEventListener 可以绑定多个。推荐使用 addEventListener 方式绑定。

🔔在监听时间最后 return false; 可以使事件不再向上传递。

美化一下Style​

使用脚本向页面上添加新元素.js ：

// 生成随机颜色
let randomColor = function () {
    return "#" + Math.random().toString(16).slice(2, 8);
};

/*多元素监听*/
// 创建一个新的div元素
let div = document.createElement("div");
// 向这个div元素中添加入内容
div.innerHTML = "<span id=\"span-1\" style=\"font-size:12px\">span1</span><span class=\"sp\" style=\"color:red\">span class</span>";
div.style.color = randomColor(); // 注意：randomColor 函数的定义一定要放在调用之前（之上）
// 绑定监听事件
div.onclick = function (event) {
    if (event.target.id === "span-1") {
        alert("span-1被点击了");
    } else if (event.target.className === "sp") {
        alert("sp这一类被点了");
    }
};
// 将div元素插入到目标位置
document.body.append(div);