JS学习笔记之三种动态创建元素区别

最新推荐文章于 2022-11-29 17:32:16 发布

vegetable-WEN

最新推荐文章于 2022-11-29 17:32:16 发布

阅读量249

点赞数 2

分类专栏： JS学习笔记文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45525630/article/details/115868532

版权

JS学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最近在学习JavaScript的时候动态创建元素区别的内容将笔记分享给大家

文章目录

前言
一、三种方法:
- 1.代码如下：
- 2.分析：
二、innerHTML和document.createElement创建元素
- 1.代码如下:
- 2.分析:
总结

前言

JS有三种方法来创建动态元素,分别是:
1.document.write()
2.innerHTML
3.document.createElement()

一、三种方法:

1.代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inner {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .create {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <button>按钮</button>
    <div>hahaha</div>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        // 三种创建元素方式区别
        // 1.document.write
        // 获取元素
        var btn = document.querySelector('button');
        // 注册事件
        btn.onclick = function () {
            document.write('<div>write添加的</div>');
        }
        // 2.innerHTML 创建元素
        var inner = document.querySelector('.inner');
        inner.innerHTML = '<a href="javascript:;">链接</a>';
        // 3.document.createElement()创建元素
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        // 添加子节点
        create.appendChild(a);
    </script>

</body>

</html>

2.分析：

运行效果:
在这里插入图片描述

我们动态创建元素的方式有以上三种，我们可以看到三种方式都相应地创建了元素。
当我们点击按钮时会出现界面值剩下write添加的这个盒子，
为什么呢这是因为document.write 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘。
(重绘的意思就是页面给我们重新绘制了一个新的HTML页面)所以这种创建元素的方式不太好。
单个元素创建看不出另外两种方法的区别下面我们就通过多元素创建来讨论一下另外两种创建元素方式的区别。

二、innerHTML和document.createElement创建元素

1.代码如下:

innerHTML第一种方式：

//innerHTML拼接字符串方式
        function fn() {
            var d1 = +new Date();
            var str = '';
            for (var i = 0; i < 1000; i++) {
                // 通过拼接字符串方式循环创建盒子
                document.body.innerHTML += '<div style="width:10px;height:10px;border:1px solid skyblue;"></div>';
            }
            var d2 = +new Date();
            console.log('innerHTML拼接字符串方式耗时:'+ (d2 - d1) + '毫秒');
        }
        fn();

innerHTML第二种方式：

// innerHTML数组方式
function fn() {
            var d1 = +new Date();
            var arr = [];
            for (var i = 0; i < 1000; i++) {
                // 往数组里面添盒子
                arr.push('<div style="width:10px;height:10px;border:1px solid skyblue;"></div>');
            }
            // 把数组转换成字符串
            document.body.innerHTML = arr.join('');
            var d2 = +new Date();
            console.log('innerHTML数组方式耗时:' + (d2 - d1) + '毫秒');
        }
        fn();

createElement的方式：

//createElemen创建元素方式
function fn() {
            var d1 = +new Date();
            var str = '';
            for (var i = 0; i < 1000; i++) {
                // 创建新的元素再放到body里面去
                var div = document.createElement('div');
                div.style.width = '10px';
                div.style.height = '10px';
                div.style.border = '1px solid red';
                document.body.appendChild(div);
            }
            var d2 = +new Date();
            console.log('createElemen创建元素方式耗时:' + (d2 - d1) + '毫秒');
        }
        fn();

2.分析:

各对应运行结果：
在这里插入图片描述

在这里插入图片描述

innerHTML是将内容写入某个DOM节点，不会导致页面的重绘。
我们可以通过运行结果看到，innerHTML创建多个元素效率要更高一些，当然采用的是数组拼接方式而不
是字符串拼接方式，结构相应也复杂一些。而采用createElement的方式创建多个元素效率稍微低一点
但是结构比较清晰明了。

总结

以上就是今天要跟大家分享的三种动态创建元素区别的内容，并且说明不同浏览器下，innerHTML的效率要比creatElement高。

vegetable-WEN

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
JS学习笔记之三种动态创建元素区别

最近在学习JavaScript的时候动态创建元素区别的内容将笔记分享给大家文章目录前言一、三种方法:1.代码如下：2.分析：二、innerHTML和document.createElement创建元素1.代码如下:2.分析:总结前言JS有三种方法来创建动态元素,分别是:1.document.write()2.innerHTML3.document.createElement()一、三种方法:1.代码如下：<!DOCTYPE html><html lang="en
复制链接

扫一扫