三种创建元素的方式

小码哥呀

于 2021-12-21 22:12:04 发布

阅读量343

点赞数

分类专栏： JavaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/qq_46112274/article/details/122074083

版权

JavaScript 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

在这里插入图片描述

1、document.write()文档流执行完毕页面也会重绘

<!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>
</head>
<body>
    <button>点击</button>
    <p>abc</p>
    <script>
        // 三种创建元素方式的区别
        // 1、document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        var btn = document.querySelector('button');
        btn.onclick = function(){
            document.write('<div>123</div>');
        }
    </script>
</body>
</html>

原先页面：
在这里插入图片描述

点击了button后：页面被重绘（重新绘制）
在这里插入图片描述

1.1、window.onload

以下代码也会将页面重绘

<!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>
</head>
<body>
    <button>点击</button>
    <p>abc</p>
    <script>
        window.onload = function(){//当整个页面加载完了，再加载这段js
            document.write('<div>123</div>');
        }
        // 三种创建元素方式的区别
        // 1、document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function(){
        //     document.write('<div>123</div>');
        // }
    </script>
</body>
</html>

在这里插入图片描述

2、innerHTML 创建元素

// 2、innerHTML 创建元素,相比与document.querySelector()效率更高
 var inner = document.querySelector('.inner');
 //2.1、追加字符串的形式创建元素，酶促都要开辟新的内存空间，相比于往数组内放元素效率较低
 // for(var i = 0;i<=10;i++){
 //     inner.innerHTML +='<a href = "#">百度</a>'
 // }
 //2.2、往数组中放元素的方式创建数组，效相比于拼接字符串率较高
 var arr = [];
 for(var i = 0;i<=10;i++){
     arr.push('<a href = "#">百度</a>');
 }
 inner.innerHTML = arr.join('');

3、document.querySelector()创建元素

// 3、document.querySelector()创建元素，相比与innerHTML效率更低
 var create = document.querySelector('.create');
 for(var i = 0;i<=10;i++){
     var a = document.createElement('a');
     create.appendChild(a);
 }

全部代码

<!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>
</head>
<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        // window.onload = function(){//当整个页面加载完了，再加载这段js
        //     document.write('<div>123</div>');
        // }
        // 三种创建元素方式的区别
        // 1、document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function(){
        //     document.write('<div>123</div>');
        // }

        // 2、innerHTML 创建元素,相比与document.querySelector()效率更高
        var inner = document.querySelector('.inner');
        //2.1、追加字符串的形式创建元素，酶促都要开辟新的内存空间，相比于往数组内放元素效率较低
        // for(var i = 0;i<=10;i++){
        //     inner.innerHTML +='<a href = "#">百度</a>'
        // }
        //2.2、往数组中放元素的方式创建数组，效相比于拼接字符串率较高
        var arr = [];
        for(var i = 0;i<=10;i++){
            arr.push('<a href = "#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        // 3、document.querySelector()创建元素，相比与innerHTML效率更低
        var create = document.querySelector('.create');
        for(var i = 0;i<=10;i++){
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>
</body>
</html>

在这里插入图片描述

小码哥呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种创建元素的方式

1、document.write()文档流执行完毕也买你会重绘<!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-sc.
复制链接

扫一扫

专栏目录